@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
/* ============================================================
   Shopro website — CSS entry point.
   Order: design-system tokens (variables + reset + components) → Tailwind
   utilities. The custom site layer (site.css) is appended by the build after
   Tailwind so it always wins the cascade. Preflight is disabled in
   tailwind.config.js because tokens/base.css is the authoritative reset.
   ============================================================ */
/* Shopro webfonts.
   SUBSTITUTION NOTE: the Shopro wordmark uses a proprietary rounded-geometric
   sans. Pending the real brand font files, we ship the closest Google Fonts:
   - Poppins        → display / wordmark feel (geometric, round bowls)
   - Plus Jakarta Sans → body & UI (calm humanist-geometric)
   Replace the @import below with local @font-face rules when brand files arrive. */
/* ============================================================
   Shopro · Colors
   Derived from the brand mark: navy wordmark + indigo→pink cart.
   Calm, cool-leaning palette. Gradients reserved for emphasis.
   ============================================================ */
:root {
  /* --- Brand core ------------------------------------------- */
  --shopro-navy:      #0D1062;  /* wordmark, primary ink, brand anchor */
  --shopro-blue:      #3C57E6;  /* primary action blue (mark, bluest)  */
  --shopro-indigo:    #6E67E0;  /* mid gradient stop                    */
  --shopro-pink:      #FD96D0;  /* soft brand pink (mark)               */
  --shopro-pink-deep: #F368B0;  /* saturated pink for emphasis          */

  /* --- Blue scale ------------------------------------------- */
  --blue-50:  #EEF1FE;
  --blue-100: #DDE3FD;
  --blue-200: #BBC6FA;
  --blue-300: #92A3F4;
  --blue-400: #6478EE;
  --blue-500: #3C57E6;  /* = --shopro-blue */
  --blue-600: #2C41C2;
  --blue-700: #233399;
  --blue-800: #1C2873;
  --blue-900: #161E54;

  /* --- Pink scale ------------------------------------------- */
  --pink-50:  #FEF1F8;
  --pink-100: #FDE2F1;
  --pink-200: #FCC8E4;
  --pink-300: #FFB8DD;
  --pink-400: #FD96D0;  /* = --shopro-pink */
  --pink-500: #F368B0;  /* = --shopro-pink-deep */
  --pink-600: #D9408F;
  --pink-700: #B12C71;
  --pink-800: #88245A;
  --pink-900: #5E1A40;

  /* --- Neutral (cool, faintly indigo-tinted) ---------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8FC;
  --neutral-100: #EFF1F8;
  --neutral-200: #E3E6F1;
  --neutral-300: #CDD2E4;
  --neutral-400: #A6ADC9;
  --neutral-500: #7C84A6;
  --neutral-600: #5A6286;
  --neutral-700: #3F476A;
  --neutral-800: #28304F;
  --neutral-900: #161C36;

  /* --- Semantic (status) ------------------------------------ */
  --success-50:  #E9F8F1;
  --success-500: #1FA971;
  --success-700: #157A52;
  --warning-50:  #FFF6E6;
  --warning-500: #E89417;
  --warning-700: #B26E0C;
  --danger-50:   #FDECEC;
  --danger-500:  #E14444;
  --danger-700:  #AE2E2E;
  --info-50:     var(--blue-50);
  --info-500:    var(--blue-500);

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  /* Text / ink */
  --text-strong:   var(--shopro-navy);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-on-brand: var(--neutral-0);
  --text-link:     var(--shopro-blue);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-hover:   var(--neutral-100);
  --surface-inverse: var(--shopro-navy);
  --surface-tint-blue: var(--blue-50);
  --surface-tint-pink: var(--pink-50);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--shopro-blue);

  /* Interactive (primary = blue) */
  --action-primary:        var(--shopro-blue);
  --action-primary-hover:  var(--blue-600);
  --action-primary-press:  var(--blue-700);
  --action-on-primary:     var(--neutral-0);

  /* Accent (pink) — emphasis, highlights, secondary CTAs */
  --accent:        var(--shopro-pink-deep);
  --accent-hover:  var(--pink-600);
  --accent-soft:   var(--pink-100);

  /* Focus ring */
  --ring: 0 0 0 3px var(--blue-200);
}
/* ============================================================
   Shopro · Typography
   Display: Poppins (echoes the rounded-geometric wordmark)
   Text/UI: Plus Jakarta Sans (calm, legible, humanist-geometric)
   Type scale is a 1.2 minor-third, base 16px.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-display:  800; /* @kind font */ /* wordmark-weight, big display only */

  /* Font sizes (rem, 16px base) */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — body default */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;  /* large display */
  --tracking-snug:   -0.01em;  /* headings */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* eyebrows / overline labels */

  /* Semantic roles */
  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);
}
/* ============================================================
   Shopro · Spacing & layout
   4px base grid. Calm layouts favour generous whitespace.
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */

  /* Container widths */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* Common gutters */
  --gutter-page: var(--space-6);
  --gutter-card: var(--space-6);
}
/* ============================================================
   Shopro · Radius, shadows, motion
   Soft, rounded, calm. Shadows are low-contrast and cool-tinted.
   ============================================================ */
:root {
  /* Corner radii — generous, friendly rounding */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows — soft, indigo-tinted, never harsh */
  --shadow-xs:  0 1px 2px rgba(13, 16, 98, 0.06);
  --shadow-sm:  0 2px 6px rgba(13, 16, 98, 0.07);
  --shadow-md:  0 6px 18px rgba(13, 16, 98, 0.08);
  --shadow-lg:  0 16px 40px rgba(13, 16, 98, 0.10);
  --shadow-xl:  0 28px 64px rgba(13, 16, 98, 0.14);

  /* Coloured glows for emphasis (use sparingly) */
  --shadow-blue: 0 10px 30px rgba(60, 87, 230, 0.28);
  --shadow-pink: 0 10px 30px rgba(243, 104, 176, 0.28);

  /* Motion — calm, no bounce. Gentle ease-out everywhere. */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-base:   200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */
  --transition-base: all var(--duration-base) var(--ease-out);
}
/* ============================================================
   Shopro · Gradients
   "Some gradients where emphasis matters, but not overdone."
   Use sparingly: hero accents, the mark, one primary CTA per view,
   progress/affordance highlights. Never as full-page wallpaper.
   ============================================================ */
:root {
  /* The brand gradient — indigo-blue → pink, mirrors the cart mark. */
  --gradient-brand:     linear-gradient(120deg, var(--shopro-blue) 0%, var(--shopro-indigo) 45%, var(--shopro-pink) 100%);
  --gradient-brand-rev: linear-gradient(120deg, var(--shopro-pink) 0%, var(--shopro-indigo) 55%, var(--shopro-blue) 100%);

  /* Subtle tint wash for section/hero backgrounds (very low energy). */
  --gradient-wash:  linear-gradient(135deg, var(--blue-50) 0%, var(--pink-50) 100%);

  /* Vertical brand bar (sidebars, accent rails). */
  --gradient-rail:  linear-gradient(180deg, var(--shopro-blue) 0%, var(--shopro-pink) 100%);

  /* For text-clip headlines: background-image + -webkit-background-clip:text. */
  --gradient-text:  linear-gradient(100deg, var(--shopro-blue) 0%, var(--shopro-pink-deep) 100%);
}
/* ============================================================
   Shopro · Base + components (CSS-first, framework-free)
   No React/Vue required — these classes are the component API.
   ============================================================ */
/* --- Reset / element defaults ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* Tailwind transform-variable defaults. Tailwind v3 normally emits these via
   Preflight, but Preflight is disabled (see tailwind.config.js) so the design
   system's own reset stays authoritative. Without these defaults every
   translate/scale/rotate/skew utility resolves to an invalid `transform` (the
   composed value references undefined `var(--tw-*)`), so the browser drops it
   and utilities like `-translate-y-1/2` silently do nothing. */
*, *::before, *::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 0.5em;
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
p  { margin: 0 0 1em; text-wrap: pretty; }
a  { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: var(--text-sm); }
code, pre, kbd { font-family: var(--font-mono); }
/* Utility: gradient text headline */
.shopro-gradient-text {
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shopro-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
/* ============================================================
   Button — .btn + variant + size modifiers
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 0 var(--space-5);
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
/* Primary — solid blue */
.btn--primary {
  background: var(--action-primary);
  color: var(--action-on-primary);
  box-shadow: var(--shadow-xs);
}
.btn--primary:hover { background: var(--action-primary-hover); }
.btn--primary:active { background: var(--action-primary-press); }
/* Brand — the one gradient CTA (use once per view, for emphasis) */
.btn--brand {
  background: var(--gradient-brand);
  color: var(--neutral-0);
  box-shadow: var(--shadow-blue);
}
.btn--brand:hover { filter: brightness(1.04); box-shadow: var(--shadow-pink); }
.btn--brand:active { filter: brightness(0.97); }
/* Secondary — outline */
.btn--secondary {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-strong);
}
.btn--secondary:hover { border-color: var(--border-strong); background: var(--surface-hover); }
/* Ghost — text only */
.btn--ghost { background: transparent; color: var(--text-strong); }
.btn--ghost:hover { background: var(--surface-hover); }
/* Accent — soft pink */
.btn--accent {
  background: var(--accent-soft);
  color: var(--pink-700);
}
.btn--accent:hover { background: var(--pink-200); }
/* Sizes */
.btn--sm { height: 36px; font-size: var(--text-xs); padding: 0 var(--space-4); }
.btn--lg { height: 52px; font-size: var(--text-md); padding: 0 var(--space-8); }
.btn--block { display: flex; width: 100%; }
/* Icon-only */
.btn--icon { width: 44px; padding: 0; border-radius: var(--radius-circle); }
.btn--icon.btn--sm { width: 36px; }
.btn--icon.btn--lg { width: 52px; }
/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.card--interactive { cursor: pointer; transition: var(--transition-base); }
.card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card__body { padding: var(--gutter-card); }
.card__media { display: block; width: 100%; background: var(--surface-sunken); }
/* ============================================================
   Badge / Tag
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-body);
}
.badge--blue    { background: var(--blue-50);    color: var(--blue-700); }
.badge--pink    { background: var(--pink-100);   color: var(--pink-700); }
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--warning { background: var(--warning-50); color: var(--warning-700); }
.badge--danger  { background: var(--danger-50);  color: var(--danger-700); }
.badge--brand   { background: var(--gradient-brand); color: var(--neutral-0); }
.badge--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}
/* ============================================================
   Form controls
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.help { font-size: var(--text-xs); color: var(--text-muted); }
.input, .select, .textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  height: 44px;
  width: 100%;
  transition: var(--transition-base);
}
.textarea { height: auto; padding: var(--space-3) var(--space-4); min-height: 96px; line-height: var(--leading-normal); }
.input::-moz-placeholder, .textarea::-moz-placeholder { color: var(--text-subtle); }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--border-focus); box-shadow: var(--ring);
}
.input--error, .textarea--error { border-color: var(--danger-500); }
.input--error:focus { box-shadow: 0 0 0 3px var(--danger-50); }
.select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237C84A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}
/* Switch */
.switch { position: relative; display: inline-flex; width: 44px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--neutral-300); transition: var(--transition-base);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--neutral-0); box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
}
.switch input:checked + .switch__track { background: var(--action-primary); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }
/* Checkbox/radio accent colour */
.checkbox, .radio { width: 18px; height: 18px; accent-color: var(--action-primary); cursor: pointer; }
/* ============================================================
   Avatar
   ============================================================ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gradient-brand); color: var(--neutral-0);
  font-weight: var(--fw-bold); font-size: var(--text-sm);
  overflow: hidden; flex: none;
}
.avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--text-lg); }
/* ============================================================
   Alert
   ============================================================ */
.alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  font-size: var(--text-sm);
}
.alert--info    { background: var(--blue-50);    border-color: var(--blue-100); color: var(--blue-800); }
.alert--success { background: var(--success-50); border-color: #BFE8D5; color: var(--success-700); }
.alert--warning { background: var(--warning-50); border-color: #FAE3B5; color: var(--warning-700); }
.alert--danger  { background: var(--danger-50);  border-color: #F6C4C4; color: var(--danger-700); }
/* ============================================================
   Helpers
   ============================================================ */
.container { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--gutter-page); }
.surface-wash { background: var(--gradient-wash); }
.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sr-only{
  position:      absolute;
  width:      1px;
  height:      1px;
  padding:      0;
  margin:      -1px;
  overflow:      hidden;
  clip:      rect(0, 0, 0, 0);
  white-space:      nowrap;
  border-width:      0;
}
.collapse{
  visibility:      collapse;
}
.fixed{
  position:      fixed;
}
.absolute{
  position:      absolute;
}
.relative{
  position:      relative;
}
.sticky{
  position:      sticky;
}
.inset-x-0{
  left:      0px;
  right:      0px;
}
.-left-\[34px\]{
  left:      -34px;
}
.-right-\[28px\]{
  right:      -28px;
}
.-top-\[13px\]{
  top:      -13px;
}
.-top-\[18px\]{
  top:      -18px;
}
.bottom-\[7\%\]{
  bottom:      7%;
}
.left-1\/2{
  left:      50%;
}
.left-5{
  left:      1.25rem;
}
.left-8{
  left:      2rem;
}
.right-2{
  right:      0.5rem;
}
.top-0{
  top:      0px;
}
.top-1\/2{
  top:      50%;
}
.top-\[100px\]{
  top:      100px;
}
.top-\[6\%\]{
  top:      6%;
}
.top-\[76px\]{
  top:      76px;
}
.z-40{
  z-index:      40;
}
.z-50{
  z-index:      50;
}
.m-0{
  margin:      0px;
}
.mx-auto{
  margin-left:      auto;
  margin-right:      auto;
}
.-mt-2{
  margin-top:      -0.5rem;
}
.mb-1{
  margin-bottom:      0.25rem;
}
.mb-10{
  margin-bottom:      2.5rem;
}
.mb-2{
  margin-bottom:      0.5rem;
}
.mb-3{
  margin-bottom:      0.75rem;
}
.mb-4{
  margin-bottom:      1rem;
}
.mb-5{
  margin-bottom:      1.25rem;
}
.mb-6{
  margin-bottom:      1.5rem;
}
.mb-8{
  margin-bottom:      2rem;
}
.ml-auto{
  margin-left:      auto;
}
.mt-10{
  margin-top:      2.5rem;
}
.mt-12{
  margin-top:      3rem;
}
.mt-14{
  margin-top:      3.5rem;
}
.mt-16{
  margin-top:      4rem;
}
.mt-2{
  margin-top:      0.5rem;
}
.mt-3{
  margin-top:      0.75rem;
}
.mt-4{
  margin-top:      1rem;
}
.mt-5{
  margin-top:      1.25rem;
}
.mt-6{
  margin-top:      1.5rem;
}
.mt-8{
  margin-top:      2rem;
}
.mt-auto{
  margin-top:      auto;
}
.mt-px{
  margin-top:      1px;
}
.block{
  display:      block;
}
.inline-block{
  display:      inline-block;
}
.inline{
  display:      inline;
}
.flex{
  display:      flex;
}
.inline-flex{
  display:      inline-flex;
}
.table{
  display:      table;
}
.grid{
  display:      grid;
}
.contents{
  display:      contents;
}
.hidden{
  display:      none;
}
.aspect-\[16\/9\]{
  aspect-ratio:      16/9;
}
.h-10{
  height:      2.5rem;
}
.h-11{
  height:      2.75rem;
}
.h-12{
  height:      3rem;
}
.h-14{
  height:      3.5rem;
}
.h-7{
  height:      1.75rem;
}
.h-9{
  height:      2.25rem;
}
.h-\[22px\]{
  height:      22px;
}
.h-\[30px\]{
  height:      30px;
}
.h-\[38px\]{
  height:      38px;
}
.h-\[76px\]{
  height:      76px;
}
.h-full{
  height:      100%;
}
.min-h-\[260px\]{
  min-height:      260px;
}
.w-10{
  width:      2.5rem;
}
.w-11{
  width:      2.75rem;
}
.w-12{
  width:      3rem;
}
.w-14{
  width:      3.5rem;
}
.w-9{
  width:      2.25rem;
}
.w-\[22px\]{
  width:      22px;
}
.w-\[38px\]{
  width:      38px;
}
.w-auto{
  width:      auto;
}
.w-full{
  width:      100%;
}
.max-w-\[180px\]{
  max-width:      180px;
}
.max-w-\[30ch\]{
  max-width:      30ch;
}
.max-w-\[36ch\]{
  max-width:      36ch;
}
.max-w-\[46ch\]{
  max-width:      46ch;
}
.max-w-\[520px\]{
  max-width:      520px;
}
.max-w-\[52ch\]{
  max-width:      52ch;
}
.max-w-\[560px\]{
  max-width:      560px;
}
.max-w-\[56ch\]{
  max-width:      56ch;
}
.max-w-\[62ch\]{
  max-width:      62ch;
}
.max-w-\[640px\]{
  max-width:      640px;
}
.max-w-\[680px\]{
  max-width:      680px;
}
.max-w-\[720px\]{
  max-width:      720px;
}
.max-w-\[760px\]{
  max-width:      760px;
}
.max-w-\[900px\]{
  max-width:      900px;
}
.max-w-\[920px\]{
  max-width:      920px;
}
.max-w-\[960px\]{
  max-width:      960px;
}
.max-w-container{
  max-width:      1320px;
}
.max-w-containerlg{
  max-width:      1120px;
}
.flex-1{
  flex:      1 1 0%;
}
.shrink-0{
  flex-shrink:      0;
}
.border-collapse{
  border-collapse:      collapse;
}
.-translate-x-1\/2{
  --tw-translate-x:      -50%;
  transform:      translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y:      -50%;
  transform:      translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scroll-mt-\[100px\]{
  scroll-margin-top:      100px;
}
.list-none{
  list-style-type:      none;
}
.flex-col{
  flex-direction:      column;
}
.flex-wrap{
  flex-wrap:      wrap;
}
.items-start{
  align-items:      flex-start;
}
.items-center{
  align-items:      center;
}
.justify-center{
  justify-content:      center;
}
.justify-between{
  justify-content:      space-between;
}
.gap-1{
  gap:      0.25rem;
}
.gap-10{
  gap:      2.5rem;
}
.gap-12{
  gap:      3rem;
}
.gap-16{
  gap:      4rem;
}
.gap-2{
  gap:      0.5rem;
}
.gap-3{
  gap:      0.75rem;
}
.gap-4{
  gap:      1rem;
}
.gap-5{
  gap:      1.25rem;
}
.gap-6{
  gap:      1.5rem;
}
.gap-8{
  gap:      2rem;
}
.gap-\[3px\]{
  gap:      3px;
}
.self-start{
  align-self:      flex-start;
}
.overflow-hidden{
  overflow:      hidden;
}
.text-ellipsis{
  text-overflow:      ellipsis;
}
.text-balance{
  text-wrap:      balance;
}
.rounded-2xl{
  border-radius:      28px;
}
.rounded-full{
  border-radius:      9999px;
}
.rounded-lg{
  border-radius:      16px;
}
.rounded-md{
  border-radius:      12px;
}
.rounded-pill{
  border-radius:      999px;
}
.rounded-xl{
  border-radius:      22px;
}
.border{
  border-width:      1px;
}
.border-y{
  border-top-width:      1px;
  border-bottom-width:      1px;
}
.border-b{
  border-bottom-width:      1px;
}
.border-t{
  border-top-width:      1px;
}
.border-line{
  border-color:      var(--border-default);
}
.border-line-subtle{
  border-color:      var(--border-subtle);
}
.border-white\/10{
  border-color:      rgb(255 255 255 / 0.1);
}
.border-white\/50{
  border-color:      rgb(255 255 255 / 0.5);
}
.border-white\/\[0\.16\]{
  border-color:      rgb(255 255 255 / 0.16);
}
.bg-blue-50{
  background-color:      var(--blue-50);
}
.bg-navy{
  background-color:      var(--shopro-navy);
}
.bg-pink-100{
  background-color:      var(--pink-100);
}
.bg-success-50{
  background-color:      var(--success-50);
}
.bg-surface-card{
  background-color:      var(--surface-card);
}
.bg-surface-page{
  background-color:      var(--surface-page);
}
.bg-surface-sunken{
  background-color:      var(--surface-sunken);
}
.bg-white{
  --tw-bg-opacity:      1;
  background-color:      rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/\[0\.03\]{
  background-color:      rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.06\]{
  background-color:      rgb(255 255 255 / 0.06);
}
.bg-brand{
  background-image:      var(--gradient-brand);
}
.bg-wash{
  background-image:      var(--gradient-wash);
}
.object-cover{
  -o-object-fit:      cover;
     object-fit:      cover;
}
.p-0{
  padding:      0px;
}
.p-10{
  padding:      2.5rem;
}
.p-5{
  padding:      1.25rem;
}
.p-6{
  padding:      1.5rem;
}
.p-8{
  padding:      2rem;
}
.px-12{
  padding-left:      3rem;
  padding-right:      3rem;
}
.px-3{
  padding-left:      0.75rem;
  padding-right:      0.75rem;
}
.px-3\.5{
  padding-left:      0.875rem;
  padding-right:      0.875rem;
}
.px-4{
  padding-left:      1rem;
  padding-right:      1rem;
}
.px-5{
  padding-left:      1.25rem;
  padding-right:      1.25rem;
}
.px-6{
  padding-left:      1.5rem;
  padding-right:      1.5rem;
}
.px-8{
  padding-left:      2rem;
  padding-right:      2rem;
}
.py-1{
  padding-top:      0.25rem;
  padding-bottom:      0.25rem;
}
.py-1\.5{
  padding-top:      0.375rem;
  padding-bottom:      0.375rem;
}
.py-10{
  padding-top:      2.5rem;
  padding-bottom:      2.5rem;
}
.py-12{
  padding-top:      3rem;
  padding-bottom:      3rem;
}
.py-16{
  padding-top:      4rem;
  padding-bottom:      4rem;
}
.py-2{
  padding-top:      0.5rem;
  padding-bottom:      0.5rem;
}
.py-20{
  padding-top:      5rem;
  padding-bottom:      5rem;
}
.py-24{
  padding-top:      6rem;
  padding-bottom:      6rem;
}
.py-3{
  padding-top:      0.75rem;
  padding-bottom:      0.75rem;
}
.py-5{
  padding-top:      1.25rem;
  padding-bottom:      1.25rem;
}
.py-8{
  padding-top:      2rem;
  padding-bottom:      2rem;
}
.py-\[5px\]{
  padding-top:      5px;
  padding-bottom:      5px;
}
.pb-10{
  padding-bottom:      2.5rem;
}
.pb-12{
  padding-bottom:      3rem;
}
.pb-16{
  padding-bottom:      4rem;
}
.pb-5{
  padding-bottom:      1.25rem;
}
.pb-8{
  padding-bottom:      2rem;
}
.pl-14{
  padding-left:      3.5rem;
}
.pl-3\.5{
  padding-left:      0.875rem;
}
.pr-1\.5{
  padding-right:      0.375rem;
}
.pr-28{
  padding-right:      7rem;
}
.pr-32{
  padding-right:      8rem;
}
.pt-1\.5{
  padding-top:      0.375rem;
}
.pt-16{
  padding-top:      4rem;
}
.pt-20{
  padding-top:      5rem;
}
.pt-4{
  padding-top:      1rem;
}
.pt-6{
  padding-top:      1.5rem;
}
.pt-8{
  padding-top:      2rem;
}
.text-left{
  text-align:      left;
}
.text-center{
  text-align:      center;
}
.font-display{
  font-family:      Poppins, system-ui, -apple-system, sans-serif;
}
.font-sans{
  font-family:      "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}
.text-2xl{
  font-size:      1.5rem;
  line-height:      2rem;
}
.text-base{
  font-size:      1rem;
  line-height:      1.5rem;
}
.text-lg{
  font-size:      1.125rem;
  line-height:      1.75rem;
}
.text-sm{
  font-size:      0.875rem;
  line-height:      1.25rem;
}
.text-xl{
  font-size:      1.25rem;
  line-height:      1.75rem;
}
.text-xs{
  font-size:      0.75rem;
  line-height:      1rem;
}
.font-bold{
  font-weight:      700;
}
.font-normal{
  font-weight:      400;
}
.font-semibold{
  font-weight:      600;
}
.uppercase{
  text-transform:      uppercase;
}
.leading-\[1\.6\]{
  line-height:      1.6;
}
.leading-\[1\.7\]{
  line-height:      1.7;
}
.leading-none{
  line-height:      1;
}
.leading-snug{
  line-height:      1.375;
}
.tracking-\[0\.04em\]{
  letter-spacing:      0.04em;
}
.\!text-pink-400{
  color:      var(--pink-400) !important;
}
.text-blue{
  color:      var(--shopro-blue);
}
.text-ink-body{
  color:      var(--text-body);
}
.text-ink-muted{
  color:      var(--text-muted);
}
.text-ink-strong{
  color:      var(--text-strong);
}
.text-navy{
  color:      var(--shopro-navy);
}
.text-pink-500{
  color:      var(--pink-500);
}
.text-pink-600{
  color:      var(--pink-600);
}
.text-success-500{
  color:      var(--success-500);
}
.text-white{
  --tw-text-opacity:      1;
  color:      rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70{
  color:      rgb(255 255 255 / 0.7);
}
.text-white\/90{
  color:      rgb(255 255 255 / 0.9);
}
.text-white\/\[0\.66\]{
  color:      rgb(255 255 255 / 0.66);
}
.no-underline{
  text-decoration-line:      none;
}
.shadow-blue{
  --tw-shadow:      var(--shadow-blue);
  --tw-shadow-colored:      var(--shadow-blue);
  box-shadow:      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow:      var(--shadow-lg);
  --tw-shadow-colored:      var(--shadow-lg);
  box-shadow:      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow:      var(--shadow-md);
  --tw-shadow-colored:      var(--shadow-md);
  box-shadow:      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow:      var(--shadow-sm);
  --tw-shadow-colored:      var(--shadow-sm);
  box-shadow:      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow:      var(--shadow-xl);
  --tw-shadow-colored:      var(--shadow-xl);
  box-shadow:      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs{
  --tw-shadow:      var(--shadow-xs);
  --tw-shadow-colored:      var(--shadow-xs);
  box-shadow:      var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-blue{
  --tw-shadow-color:      var(--shopro-blue);
  --tw-shadow:      var(--tw-shadow-colored);
}
.outline{
  outline-style:      solid;
}
.outline-2{
  outline-width:      2px;
}
.-outline-offset-2{
  outline-offset:      -2px;
}
.outline-blue{
  outline-color:      var(--shopro-blue);
}
.grayscale{
  --tw-grayscale:      grayscale(100%);
  filter:      var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-transform{
  transition-property:      transform;
  transition-timing-function:      cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:      150ms;
}
.duration-500{
  transition-duration:      500ms;
}
.placeholder\:text-white\/50::-moz-placeholder{
  color:      rgb(255 255 255 / 0.5);
}
.placeholder\:text-white\/50::placeholder{
  color:      rgb(255 255 255 / 0.5);
}
.hover\:bg-cool-100:hover{
  background-color:      var(--neutral-100);
}
.hover\:text-blue:hover{
  color:      var(--shopro-blue);
}
.hover\:text-ink-strong:hover{
  color:      var(--text-strong);
}
.hover\:text-white:hover{
  --tw-text-opacity:      1;
  color:      rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:no-underline:hover{
  text-decoration-line:      none;
}
.group:hover .group-hover\:scale-\[1\.03\]{
  --tw-scale-x:      1.03;
  --tw-scale-y:      1.03;
  transform:      translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media not all and (min-width: 1280px){
  .max-xl\:left-2{
    left:      0.5rem;
  }
  .max-xl\:right-2{
    right:      0.5rem;
  }
}
@media not all and (min-width: 1024px){
  .max-lg\:mx-auto{
    margin-left:      auto;
    margin-right:      auto;
  }
  .max-lg\:hidden{
    display:      none;
  }
  .max-lg\:max-w-\[460px\]{
    max-width:      460px;
  }
  .max-lg\:gap-10{
    gap:      2.5rem;
  }
  .max-lg\:gap-12{
    gap:      3rem;
  }
  .max-lg\:gap-8{
    gap:      2rem;
  }
}
@media not all and (min-width: 768px){
  .max-md\:w-full{
    width:      100%;
  }
  .max-md\:min-w-\[640px\]{
    min-width:      640px;
  }
  .max-md\:flex-col{
    flex-direction:      column;
  }
  .max-md\:items-start{
    align-items:      flex-start;
  }
  .max-md\:gap-5{
    gap:      1.25rem;
  }
  .max-md\:gap-8{
    gap:      2rem;
  }
  .max-md\:overflow-x-auto{
    overflow-x:      auto;
  }
  .max-md\:p-6{
    padding:      1.5rem;
  }
  .max-md\:p-7{
    padding:      1.75rem;
  }
  .max-md\:px-6{
    padding-left:      1.5rem;
    padding-right:      1.5rem;
  }
  .max-md\:py-12{
    padding-top:      3rem;
    padding-bottom:      3rem;
  }
  .max-md\:py-14{
    padding-top:      3.5rem;
    padding-bottom:      3.5rem;
  }
  .max-md\:py-16{
    padding-top:      4rem;
    padding-bottom:      4rem;
  }
}
@media (min-width: 640px){
  .sm\:grid-cols-2{
    grid-template-columns:      repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px){
  .md\:order-first{
    order:      -9999;
  }
  .md\:grid-cols-2{
    grid-template-columns:      repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns:      repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px){
  .lg\:block{
    display:      block;
  }
  .lg\:flex{
    display:      flex;
  }
  .lg\:hidden{
    display:      none;
  }
  .lg\:grid-cols-3{
    grid-template-columns:      repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4{
    grid-template-columns:      repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[1\.05fr_1fr\]{
    grid-template-columns:      1.05fr 1fr;
  }
  .lg\:grid-cols-\[1\.6fr_1fr_1fr_1\.4fr\]{
    grid-template-columns:      1.6fr 1fr 1fr 1.4fr;
  }
  .lg\:grid-cols-\[1fr_1\.05fr\]{
    grid-template-columns:      1fr 1.05fr;
  }
  .lg\:grid-cols-\[1fr_1\.3fr\]{
    grid-template-columns:      1fr 1.3fr;
  }
  .lg\:grid-cols-\[260px_1fr\]{
    grid-template-columns:      260px 1fr;
  }
  .lg\:pt-6{
    padding-top:      1.5rem;
  }
}
.\[\&\>p\]\:m-0>p{
  margin:      0px;
}
.\[\&_a\]\:text-blue a{
  color:      var(--shopro-blue);
}
.\[\&_h2\]\:mb-4 h2{
  margin-bottom:      1rem;
}
.\[\&_h2\]\:mt-10 h2{
  margin-top:      2.5rem;
}
.\[\&_h2\]\:font-display h2{
  font-family:      Poppins, system-ui, -apple-system, sans-serif;
}
.\[\&_h2\]\:text-ink-strong h2{
  color:      var(--text-strong);
}
.\[\&_h3\]\:mb-2 h3{
  margin-bottom:      0.5rem;
}
.\[\&_h3\]\:mb-3 h3{
  margin-bottom:      0.75rem;
}
.\[\&_h3\]\:mt-6 h3{
  margin-top:      1.5rem;
}
.\[\&_h3\]\:mt-8 h3{
  margin-top:      2rem;
}
.\[\&_h3\]\:font-display h3{
  font-family:      Poppins, system-ui, -apple-system, sans-serif;
}
.\[\&_h3\]\:text-lg h3{
  font-size:      1.125rem;
  line-height:      1.75rem;
}
.\[\&_h3\]\:font-semibold h3{
  font-weight:      600;
}
.\[\&_h3\]\:text-ink-strong h3{
  color:      var(--text-strong);
}
.\[\&_li\]\:mb-1 li{
  margin-bottom:      0.25rem;
}
.\[\&_li\]\:mb-2 li{
  margin-bottom:      0.5rem;
}
.\[\&_ol\]\:mb-5 ol{
  margin-bottom:      1.25rem;
}
.\[\&_ol\]\:list-decimal ol{
  list-style-type:      decimal;
}
.\[\&_ol\]\:pl-6 ol{
  padding-left:      1.5rem;
}
.\[\&_p\]\:mb-4 p{
  margin-bottom:      1rem;
}
.\[\&_p\]\:mb-5 p{
  margin-bottom:      1.25rem;
}
.\[\&_strong\]\:text-ink-strong strong{
  color:      var(--text-strong);
}
.\[\&_svg\]\:block svg{
  display:      block;
}
.\[\&_svg\]\:h-3\.5 svg{
  height:      0.875rem;
}
.\[\&_svg\]\:h-4 svg{
  height:      1rem;
}
.\[\&_svg\]\:h-5 svg{
  height:      1.25rem;
}
.\[\&_svg\]\:h-6 svg{
  height:      1.5rem;
}
.\[\&_svg\]\:h-7 svg{
  height:      1.75rem;
}
.\[\&_svg\]\:h-\[18px\] svg{
  height:      18px;
}
.\[\&_svg\]\:h-\[22px\] svg{
  height:      22px;
}
.\[\&_svg\]\:w-3\.5 svg{
  width:      0.875rem;
}
.\[\&_svg\]\:w-4 svg{
  width:      1rem;
}
.\[\&_svg\]\:w-5 svg{
  width:      1.25rem;
}
.\[\&_svg\]\:w-6 svg{
  width:      1.5rem;
}
.\[\&_svg\]\:w-7 svg{
  width:      1.75rem;
}
.\[\&_svg\]\:w-\[18px\] svg{
  width:      18px;
}
.\[\&_svg\]\:w-\[22px\] svg{
  width:      22px;
}
.\[\&_svg\]\:shrink-0 svg{
  flex-shrink:      0;
}
.\[\&_svg\]\:fill-current svg{
  fill:      currentColor;
}
.\[\&_svg\]\:text-blue svg{
  color:      var(--shopro-blue);
}
.\[\&_svg\]\:transition-transform svg{
  transition-property:      transform;
  transition-timing-function:      cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:      150ms;
}
.group:hover .group-hover\:\[\&_svg\]\:translate-x-1 svg{
  --tw-translate-x:      0.25rem;
  transform:      translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_ul\]\:mb-4 ul{
  margin-bottom:      1rem;
}
.\[\&_ul\]\:mb-5 ul{
  margin-bottom:      1.25rem;
}
.\[\&_ul\]\:list-disc ul{
  list-style-type:      disc;
}
.\[\&_ul\]\:pl-6 ul{
  padding-left:      1.5rem;
}


/* --- site custom layer --- */
/* ============================================================
   Shopro marketing site — custom layer.
   Styling is Tailwind (config in js/tw.config.js, brand tokens from the
   Shopro Design System). This file holds ONLY what utilities can't express:
   keyframes, pseudo-element glows, gradient-text, the logo marquee/mask,
   the reveal-on-scroll state, and a few fluid display-type helpers.
   ============================================================ */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--pink-200); color: var(--shopro-navy); }
[x-cloak] { display: none !important; }

/* Buttons are <a> elements — never underline them on hover */
a.btn:hover, a.btn:focus { text-decoration: none; }
/* Brand CTA: DS ships background-origin:padding-box w/ clip:border-box,
   which offsets the gradient and bleeds a pink edge into the border. */
.btn--brand { background-origin: border-box; }

/* --- Fluid display type (clamp can't be a clean utility) -------- */
.t-h1 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4rem); }
.t-h2 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-size: clamp(2rem, 1.2rem + 3vw, 3rem); }
.t-h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem); }
.t-hero-h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.t-page-h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2.4rem, 1.4rem + 4vw, 3.75rem); }
.t-quote { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); }
.t-stat { font-family: var(--font-display); font-weight: 800; line-height: 1; font-size: clamp(3rem, 2rem + 4vw, 4.5rem); }

/* Gradient text clip (used on stat numbers) */
.text-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Hero / dark-band ambient glows (pseudo-elements) ----------- */
.hero-bg { position: relative; }
.hero-bg::after {
  content: ""; position: absolute; z-index: 0;
  width: 760px; height: 760px; right: -260px; top: -340px;
  background: radial-gradient(closest-side, rgba(110,103,224,0.22), transparent 70%);
  pointer-events: none;
}
.hero-bg > * { position: relative; z-index: 1; }
.dark-bg { position: relative; overflow: hidden; }
.dark-bg::before {
  content: ""; position: absolute; z-index: 0; width: 900px; height: 900px;
  left: 50%; top: -60%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(110,103,224,0.35), transparent 70%);
  pointer-events: none;
}
.dark-bg > * { position: relative; z-index: 1; }
.cta-sheen { position: relative; overflow: hidden; }
.cta-sheen::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,0.18), transparent 55%); pointer-events:none; }
.cta-sheen > * { position: relative; }

/* --- Logo marquee --------------------------------------------- */
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-track { display: flex; align-items: center; gap: 4rem; width: max-content; animation: marquee 38s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track img { width: auto; flex: none; filter: grayscale(1); opacity: 0.55; transition: filter var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out); }
.logo-track img:hover { filter: none; opacity: 1; }
.logo-track img[data-logo="enviromen"] { height: 28px; }
.logo-track img[data-logo="oakstyle"]  { height: 26px; }
.logo-track img[data-logo="mw"]        { height: 34px; }
.logo-track img[data-logo="lava"]      { height: 42px; }
.logo-track img[data-logo="jansok"]    { height: 44px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; } }

/* --- Secondary CTA chevron (collapses to 0 width at rest) -------- */
.cta-ghost:hover { background: rgba(255,255,255,0.10); }
.cta-ghost svg {
  width: 0; opacity: 0; overflow: hidden; margin-left: -0.5rem;
  transform: translateX(-4px);
  transition: width var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out),
              margin-left var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.cta-ghost:hover svg { width: 1.15em; opacity: 1; margin-left: 0; transform: translateX(2px); }

/* --- CTA band button lift (primary only) ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cta-lift { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); }
  .cta-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13,16,98,0.22); }
  .cta-lift:active { transform: translateY(0); }
}

/* --- FAQ accordion --------------------------------------------- */
/* Which item is open is toggled by Alpine via `.is-open`; the height animation
   and card styling are pure CSS, so the collapsed list and the default-open
   item render correctly on first paint — no flash or border pop-in while Alpine
   hydrates. The 1px border is always present (transparent on the sides when
   closed, only the bottom divider showing), so opening a card never shifts the
   layout; the open state just colours the remaining sides in. Height animates
   from 0 to auto with the grid-template-rows 0fr->1fr trick. */
.faq-q { cursor: pointer; appearance: none; border: 0; background: none; }

.faq-item {
  border: 1px solid transparent;
  border-bottom-color: var(--border-subtle);
}
.faq-item.is-open {
  border-color: var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  margin: 0.75rem 0;
}
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }

.faq-panel { display: grid; grid-template-rows: 0fr; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; min-height: 0; }

@media (prefers-reduced-motion: no-preference) {
  .faq-q svg { transition: transform var(--duration-base) var(--ease-out); }
  .faq-item {
    transition: border-color var(--duration-base) var(--ease-out),
                border-radius var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                margin var(--duration-base) var(--ease-out);
  }
  .faq-panel { transition: grid-template-rows var(--duration-base) var(--ease-out); }
}

/* --- Card hover lift (calm) ------------------------------------ */
.card-lift { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.card-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* --- Comparison table (tables stay as a component class) ------- */
.cmp { width: 100%; border-collapse: collapse; background: var(--surface-card); }
.cmp th, .cmp td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.cmp thead th { background: var(--surface-sunken); font-family: var(--font-display); color: var(--text-strong); position: sticky; top: 76px; }
.cmp thead th:not(:first-child), .cmp td:not(:first-child) { text-align: center; width: 130px; }
.cmp tbody tr:hover { background: var(--neutral-50); }
.cmp .grp td { background: var(--blue-50); font-weight: 700; color: var(--shopro-navy); font-family: var(--font-display); }
.cmp .feat { font-weight: 600; color: var(--text-strong); }
.cmp .feat small { display: block; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.cmp .yes { color: var(--success-500); }
.cmp .no { color: var(--neutral-400); }
.cmp .yes svg, .cmp .no svg { width: 18px; height: 18px; display: inline; }
@media (max-width: 760px) { .cmp thead th { position: static; } }

/* --- Reveal on scroll ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
}

/* Header blur (backdrop-filter isn't a stock utility on the CDN build) */
.header-blur { background: rgba(255,255,255,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }