/* ============================================================
   VIRALISH DESIGN SYSTEM — Foundations
   Source of truth: goviralish.com/v-club (the canonical brand expression).
   Voice: confident, warm, transparent, direct. Female-led.
   Visual system: Paytone One headlines (sentence-case), Open Sans body,
   italic + lime highlight as the signature emphasis device, hand-written
   margin notes layered on the highlight, and a fuchsia CTA that out-pops
   everything else on the page.
   ============================================================ */

/* ---------- Fonts ----------
   Display: Hanken Grotesk 800 (modern grotesque, pairs cleanly with the wordmark).
   Body + UI: Open Sans (humanist, neutral, pairs cleanly with Hanken).
   Margin notes: Caveat (looks like she scribbled it on the page next to the highlight).
*/
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=Open+Sans:wght@400;500;600;700;800&family=Caveat:wght@400;600;700&display=swap");

:root {
  /* ============ COLOR ============ */

  /* — Fuchsia · CTA · the loudest thing on every page —
     Reserved for: primary buttons, secondary (hollow-pill) buttons, tertiary
     (underlined) text links, focus rings, active interactive states. Never used
     for decoration. If a user can click it, it's fuchsia. */
  --vrl-cta-50:  #FFE6F1;
  --vrl-cta-100: #FFC1DD;
  --vrl-cta-200: #FF8AC0;
  --vrl-cta-300: #F050A1;
  --vrl-cta-400: #E22F8B;
  --vrl-cta-500: #D81B7A;  /* PRIMARY CTA — fuchsia */
  --vrl-cta-600: #B81369;
  --vrl-cta-700: #930E54;
  --vrl-cta-800: #6E0A3F;
  --vrl-cta-900: #480629;
  --vrl-cta-glow: rgba(216, 27, 122, 0.40);

  /* — Green · Accent + Highlight · the signature emphasis device —
     Used for: italic-word highlight underlines, full-bleed quote/pull-quote
     blocks, list bullets, eyebrow chips, "stand-out" non-interactive elements,
     and the substrate for hand-written Caveat margin notes. Green is never a
     button color, never a link color. It exists to make adjacent content pop. */
  /* Token names retain --vrl-lime-* for backwards compatibility; the brand calls this "deck green".
     Sourced from the Viralish pitch deck — #3FE665. Use --vrl-green-* aliases in new code. */
  --vrl-lime-50:  #EAFFEF;
  --vrl-lime-100: #D1FFDC;
  --vrl-lime-200: #A5F8B9;
  --vrl-lime-300: #7CF09A;
  --vrl-lime-400: #5BEB80;
  --vrl-lime-500: #3FE665;  /* PRIMARY ACCENT — deck green */
  --vrl-lime-600: #29C84F;
  --vrl-lime-700: #1FB347;
  --vrl-lime-800: #138035;
  --vrl-lime-900: #0A4F1F;

  /* Semantic aliases. */
  --vrl-green-50:  #EAFFEF;
  --vrl-green-100: #D1FFDC;
  --vrl-green-200: #A5F8B9;
  --vrl-green-300: #7CF09A;
  --vrl-green-400: #5BEB80;
  --vrl-green-500: #3FE665;
  --vrl-green-600: #29C84F;
  --vrl-green-700: #1FB347;
  --vrl-green-800: #138035;
  --vrl-green-900: #0A4F1F;

  /* — Brand red · Wordmark only —
     Sampled from the wordmark (the "viral" half). The wordmark is its
     ONLY home. Never appears in the UI — too close in hue to the fuchsia
     CTA to coexist as a separate accent. Token kept for SVG wordmark use. */
  --vrl-red-500: #E63946;  /* WORDMARK ONLY */

  /* — Ink — */
  --vrl-ink-950: #000000;  /* impact display */
  --vrl-ink-900: #0E0E10;  /* headings */
  --vrl-ink-800: #1A1A1D;  /* body on light */
  --vrl-ink-700: #2C2C30;
  --vrl-ink-600: #4A4A50;
  --vrl-ink-500: #6B6B72;
  --vrl-ink-400: #93939A;
  --vrl-ink-300: #C2C2C7;
  --vrl-ink-200: #E2E2E6;
  --vrl-ink-100: #F1F1F3;

  /* — Surface — */
  --vrl-bg-paper: #FFFFFF;
  --vrl-bg-soft:  #FAFAFA;
  --vrl-bg-cream: #FAF7F1;
  --vrl-bg-ink:   #0E0E10;

  /* — Filler / placeholder · Used for headshot silhouette backgrounds & image placeholders */
  --vrl-filler:   #C2C2C7;

  /* — Semantic — */
  --vrl-success: #1F9D55;
  --vrl-warning: #F2A516;
  --vrl-info:    #2A6FDB;

  /* ============ TYPOGRAPHY ============ */
  --vrl-font-display: "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --vrl-font-sans:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vrl-font-body:    "Open Sans", system-ui, sans-serif;
  --vrl-font-script:  "Caveat", "Bradley Hand", cursive;  /* hand-written margin notes */

  --vrl-fs-xs:    0.75rem;
  --vrl-fs-sm:    0.875rem;
  --vrl-fs-base:  1rem;
  --vrl-fs-md:    1.125rem;
  --vrl-fs-lg:    1.375rem;
  --vrl-fs-xl:    1.75rem;
  --vrl-fs-2xl:   2.25rem;
  --vrl-fs-3xl:   3rem;
  --vrl-fs-4xl:   4rem;
  --vrl-fs-5xl:   5.5rem;
  --vrl-fs-6xl:   7.5rem;

  --vrl-lh-tight:   1.05;            /* @kind font */
  --vrl-lh-snug:    1.18;            /* @kind font */
  --vrl-lh-normal:  1.5;             /* @kind font */
  --vrl-lh-relaxed: 1.65;            /* @kind font */

  --vrl-tracking-tight:  -0.015em;   /* @kind font */
  --vrl-tracking-normal: 0;          /* @kind font */
  --vrl-tracking-wide:   0.04em;     /* @kind font */
  --vrl-tracking-wider:  0.18em;     /* @kind font */

  --vrl-fw-light:    300;            /* @kind font */
  --vrl-fw-regular:  400;            /* @kind font */
  --vrl-fw-medium:   500;            /* @kind font */
  --vrl-fw-semibold: 600;            /* @kind font */
  --vrl-fw-bold:     700;            /* @kind font */
  --vrl-fw-heavy:    800;            /* @kind font */
  --vrl-fw-black:    900;            /* @kind font */

  /* ============ SPACING ============ */
  --vrl-sp-1:  0.25rem;
  --vrl-sp-2:  0.5rem;
  --vrl-sp-3:  0.75rem;
  --vrl-sp-4:  1rem;
  --vrl-sp-5:  1.5rem;
  --vrl-sp-6:  2rem;
  --vrl-sp-7:  3rem;
  --vrl-sp-8:  4rem;
  --vrl-sp-9:  6rem;
  --vrl-sp-10: 8rem;

  /* ============ RADII ============ */
  --vrl-radius-none: 0;
  --vrl-radius-sm:   4px;
  --vrl-radius-md:   8px;
  --vrl-radius-lg:   14px;
  --vrl-radius-xl:   22px;
  --vrl-radius-2xl:  32px;
  --vrl-radius-pill: 999px;
  --vrl-radius-blob: 60% 40% 55% 45% / 50% 60% 40% 50%;

  /* ============ ELEVATION ============ */
  /* Soft drop shadows — used sparingly, mostly retired in favor of sticker shadows. */
  --vrl-shadow-xs: 0 1px 2px rgba(14,14,16,0.06);
  --vrl-shadow-sm: 0 2px 6px rgba(14,14,16,0.08);
  --vrl-shadow-md: 0 6px 18px rgba(14,14,16,0.10);
  --vrl-shadow-lg: 0 18px 40px rgba(14,14,16,0.14);

  /* Sticker shadows — solid offset block in ink. The brand's signature elevation. */
  --vrl-shadow-sticker-sm: 3px 3px 0 var(--vrl-ink-900);
  --vrl-shadow-sticker:    5px 5px 0 var(--vrl-ink-900);
  --vrl-shadow-sticker-lg: 6px 6px 0 var(--vrl-ink-900);
  --vrl-shadow-sticker-xl: 8px 8px 0 var(--vrl-ink-900);

  /* Sticker outline — same border on every sticker surface. */
  --vrl-stroke-sticker: 2.5px solid var(--vrl-ink-900);       /* @kind other */
  --vrl-stroke-sticker-thin: 2px solid var(--vrl-ink-900);    /* @kind other */

  /* ============ MOTION ============ */
  --vrl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --vrl-ease-in:  cubic-bezier(0.7, 0, 0.84, 0);   /* @kind other */
  --vrl-dur-fast: 160ms;   /* @kind other */
  --vrl-dur-base: 240ms;   /* @kind other */
  --vrl-dur-slow: 480ms;   /* @kind other */

  /* ============ LAYOUT ============ */
  --vrl-container:        1200px;
  --vrl-container-wide:   1320px;
  --vrl-container-narrow: 880px;
}

/* ============================================================
   Base utility classes
   ============================================================ */
.vrl-display {
  font-family: var(--vrl-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: var(--vrl-lh-tight);
  color: var(--vrl-ink-950);
}
.vrl-h1, .vrl-h2, .vrl-h3 {
  font-family: var(--vrl-font-display);
  color: var(--vrl-ink-900);
  line-height: var(--vrl-lh-snug);
  letter-spacing: -0.02em;
  font-weight: 800;
}
.vrl-h1 { font-size: var(--vrl-fs-3xl); }
.vrl-h2 { font-size: var(--vrl-fs-2xl); }
.vrl-h3 { font-size: var(--vrl-fs-xl); }
.vrl-body {
  font-family: var(--vrl-font-body);
  font-size: var(--vrl-fs-base);
  line-height: var(--vrl-lh-relaxed);
  color: var(--vrl-ink-800);
  font-weight: var(--vrl-fw-regular);
}
.vrl-eyebrow {
  font-family: var(--vrl-font-sans);
  font-size: var(--vrl-fs-xs);
  font-weight: var(--vrl-fw-bold);
  letter-spacing: var(--vrl-tracking-wider);
  text-transform: uppercase;
  color: var(--vrl-ink-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vrl-eyebrow::before {
  content: "●";
  font-size: 0.7em;
  color: var(--vrl-ink-900);
}
.vrl-eyebrow > span {
  background-image: linear-gradient(to top,
    var(--vrl-lime-300) 0,
    var(--vrl-lime-300) 100%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 65%;
  background-position: 0 90%;
  padding: 0 4px;
}

/* ----- Signature emphasis: italic + lime highlight underline -----
   Uses background-image + box-decoration-break so the lime "underline" wraps
   correctly across line breaks instead of stacking awkwardly. */
.vrl-highlight {
  font-style: italic;
  font-weight: var(--vrl-fw-bold);
  background-image: linear-gradient(to top,
    var(--vrl-lime-300) 0,
    var(--vrl-lime-300) 38%,
    transparent 38%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* DARK background variant — lime band reads poorly on near-black; switch
   to lime text color instead. Apply when sitting on --vrl-bg-ink or any
   dark surface. Keeps the italic + bold weight from the base device. */
.vrl-highlight--dark {
  font-style: italic;
  font-weight: var(--vrl-fw-bold);
  background-image: none;
  color: var(--vrl-lime-300);
  padding: 0;
}

/* USAGE DISCIPLINE — IMPORTANT
   The highlight is a scarce device. Cap usage at ~10–15% of headlines and
   ~10–15% of stat numbers per page. One highlight per H2/H1 maximum.
   Highlighting everything makes nothing stand out. */

/* ============================================================
   STICKER SYSTEM
   The brand's signature elevation: thick ink outline + solid offset
   shadow. Applied to buttons, cards, chips, badges, nav, inputs, and
   pull-quotes. NOT applied to: stat counters (numbers stand alone),
   body/long-form containers, photo overlays, or page-level sections.
   ============================================================ */

/* Buttons — primary fuchsia fill, secondary hollow, both sticker-shadowed.
   Tertiary stays an inline underlined fuchsia text link (not a sticker). */
.vrl-btn {
  font-family: var(--vrl-font-sans);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-pill);
  padding: 14px 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--vrl-cta-500);
  color: #fff;
  box-shadow: 4px 4px 0 var(--vrl-ink-900);
  transition: transform 160ms var(--vrl-ease-out), box-shadow 160ms var(--vrl-ease-out);
}
.vrl-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--vrl-ink-900); }
.vrl-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--vrl-ink-900); }
.vrl-btn--secondary {
  background: #fff;
  color: var(--vrl-cta-500);
  border-color: var(--vrl-cta-500);
  box-shadow: 4px 4px 0 var(--vrl-cta-500);
}
.vrl-btn--secondary:hover { box-shadow: 6px 6px 0 var(--vrl-cta-500); }
.vrl-btn--secondary:active { box-shadow: 0 0 0 var(--vrl-cta-500); }
.vrl-btn--lg { padding: 18px 40px; font-size: 18px; }
.vrl-btn--sm { padding: 10px 22px; font-size: 14px; border-width: 2px; box-shadow: 3px 3px 0 var(--vrl-ink-900); }

/* Tertiary text link — inline, fuchsia, underlined. NOT a sticker. */
.vrl-link {
  font-family: var(--vrl-font-sans);
  font-weight: 700;
  color: var(--vrl-cta-500);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.vrl-link:hover { color: var(--vrl-cta-700); }

/* Stamp container — paper / lime variants. Ink stamp retired. */
.vrl-stamp {
  background: #fff;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-xl);
  box-shadow: var(--vrl-shadow-sticker-lg);
  padding: 28px 32px;
}
.vrl-stamp--lime { background: var(--vrl-lime-300); }

/* Sticker chip — eyebrow / status / category pill. */
.vrl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vrl-lime-300);
  border: var(--vrl-stroke-sticker-thin);
  border-radius: var(--vrl-radius-pill);
  padding: 6px 14px;
  font-family: var(--vrl-font-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--vrl-ink-900);
}

/* Founder seal / trust badge — rotated circle stamp. */
.vrl-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: var(--vrl-cta-500);
  border: var(--vrl-stroke-sticker);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--vrl-ink-900);
  color: #fff;
  font-family: var(--vrl-font-display);
  font-weight: 800;
  transform: rotate(-8deg);
  text-align: center;
}
.vrl-badge--lime { background: var(--vrl-lime-300); color: var(--vrl-ink-900); transform: rotate(6deg); }
.vrl-badge--paper { background: #fff; color: var(--vrl-ink-900); transform: rotate(-3deg); }

/* Nav pill bar. */
.vrl-nav {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-pill);
  padding: 6px;
  box-shadow: 4px 4px 0 var(--vrl-ink-900);
}
.vrl-nav a {
  font-family: var(--vrl-font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--vrl-ink-700);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: var(--vrl-radius-pill);
}
.vrl-nav a.is-active { background: var(--vrl-ink-900); color: #fff; }

/* Form input — sticker pill that pairs with a sticker button. */
.vrl-input {
  font-family: var(--vrl-font-sans);
  font-size: 15px;
  font-weight: 600;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-pill);
  padding: 12px 22px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--vrl-ink-900);
  outline: none;
}
.vrl-input:focus { background: var(--vrl-lime-50); }

/* Green pull-quote — outlined sticker band, full-bleed one-liner. */
.vrl-pullquote {
  font-family: var(--vrl-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  background: var(--vrl-lime-300);
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-xl);
  box-shadow: var(--vrl-shadow-sticker-lg);
  padding: 36px 40px;
}

/* ============================================================
   COMPONENT CLASSES — promoted from inline preview CSS so the same
   hooks work in WordPress, Webflow, Framer, Elementor, etc.
   Bind these classes in any builder's "CSS class" field and the styling
   inherits automatically (assumes this stylesheet is loaded globally).
   ============================================================ */

/* Module / feature card — sticker stamp with green icon tile */
.vrl-module {
  padding: 32px 28px;
  background: #fff;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-xl);
  box-shadow: var(--vrl-shadow-sticker-lg);
  transition: transform 160ms var(--vrl-ease-out), box-shadow 160ms var(--vrl-ease-out);
}
.vrl-module:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--vrl-ink-900); }
.vrl-module__icon {
  width: 56px; height: 56px;
  background: var(--vrl-lime-300);
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.vrl-module__icon img, .vrl-module__icon svg { width: 32px; height: 32px; filter: brightness(0); }
.vrl-module__num {
  font-family: var(--vrl-font-sans);
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 10px;
}
.vrl-module__num span {
  background-image: linear-gradient(to top, var(--vrl-lime-300) 0, var(--vrl-lime-300) 100%, transparent 100%);
  background-repeat: no-repeat; background-size: 100% 65%; background-position: 0 90%;
  padding: 0 4px;
}
.vrl-module__title {
  font-family: var(--vrl-font-display);
  font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; line-height: 1.2;
  margin: 0 0 10px;
}
.vrl-module__body {
  font-family: var(--vrl-font-body);
  font-size: 14px; line-height: 1.6;
  color: var(--vrl-ink-600); margin: 0;
}

/* Stat counter — number stands alone, no box */
.vrl-stat { text-align: center; }
.vrl-stat__num {
  font-family: var(--vrl-font-display);
  font-weight: 800; font-size: 80px;
  line-height: 1; letter-spacing: -0.035em;
}
.vrl-stat__num em {
  font-style: normal;
  background: var(--vrl-lime-300);
  padding: 0 0.08em;
}
.vrl-stat__label {
  font-family: var(--vrl-font-sans);
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vrl-ink-700);
  margin-top: 14px;
}

/* Testimonial card — sticker stamp with green headshot */
.vrl-testi {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 18px; align-items: center;
  padding: 22px 26px;
  background: #fff;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-xl);
  box-shadow: var(--vrl-shadow-sticker);
}
.vrl-testi__avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: var(--vrl-stroke-sticker);
  background: var(--vrl-filler);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.vrl-testi__avatar svg { width: 80%; height: 80%; margin-bottom: -2px; }
.vrl-testi__body { font-size: 14px; line-height: 1.5; }
.vrl-testi__who {
  font-family: var(--vrl-font-sans);
  font-size: 11px;
  color: var(--vrl-ink-500);
  margin-top: 6px;
  font-weight: 600;
}
.vrl-testi__stars { color: var(--vrl-ink-900); font-size: 13px; }

/* Headshot frame — sticker block holding a silhouette placeholder */
.vrl-headshot {
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-2xl);
  box-shadow: var(--vrl-shadow-sticker-xl);
  background: var(--vrl-filler);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 4/5;
}
.vrl-headshot svg { width: 80%; height: auto; display: block; margin-bottom: -2px; }

/* Section container helpers */
.vrl-section { padding: 96px 0; }
.vrl-section--soft { background: var(--vrl-bg-soft); }
.vrl-section--cream { background: var(--vrl-bg-cream); }
.vrl-section--ink { background: var(--vrl-bg-ink); color: #fff; }
.vrl-container { max-width: var(--vrl-container); margin: 0 auto; padding: 0 40px; }

/* ----- Hand-written margin note (Caveat on a green highlight) ----- */
.vrl-margin-note {
  font-family: var(--vrl-font-script);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--vrl-ink-900);
  display: inline-block;
  transform: rotate(-3deg);
  background-image: linear-gradient(to top,
    var(--vrl-green-500) 0,
    var(--vrl-green-500) 90%,
    transparent 90%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0.1em 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================
   CALLOUT — green-titled sticker container.
   Use for in-line CTAs, "what we do" blocks, anything you want to
   pull out of body copy. Title sits in a green band; body sits on
   white inside the same sticker outline + offset shadow.
   ============================================================ */
.vrl-callout {
  background: #fff;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-xl);
  box-shadow: var(--vrl-shadow-sticker-lg);
  overflow: hidden;
}
.vrl-callout__title {
  background: var(--vrl-green-500);
  color: var(--vrl-ink-900);
  font-family: var(--vrl-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.015em;
  padding: 18px 28px;
  text-align: center;
  border-bottom: var(--vrl-stroke-sticker);
}
.vrl-callout__body {
  padding: 28px 32px;
  font-family: var(--vrl-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--vrl-ink-800);
}
.vrl-callout__row {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* ============================================================
   LOGO WALL — boxed title, breathing room around the marks.
   Title chip is the only sticker frame on the row; logos sit on
   open paper, dimmed to read as a group, never individually framed.
   ============================================================ */
.vrl-logo-wall {
  position: relative;
  padding: 56px 0 32px;
  text-align: center;
}
.vrl-logo-wall__label {
  display: inline-block;
  background: #fff;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-pill);
  box-shadow: var(--vrl-shadow-sticker);
  font-family: var(--vrl-font-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vrl-ink-900);
  padding: 10px 22px;
  margin: 0 0 36px;
}
.vrl-logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 36px;
  align-items: center;
  opacity: 0.78;
}
.vrl-logo-wall__grid img {
  height: 28px;
  width: auto;
  margin: 0 auto;
  display: block;
  filter: grayscale(1) contrast(0.9);
}
.vrl-logo-wall__grid .vrl-logo-wall__lg {
  font-family: var(--vrl-font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--vrl-ink-800);
  text-align: center;
}
@media (max-width: 720px) {
  .vrl-logo-wall__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ============================================================
   COUNTDOWN TIMER — sticker digit tiles for limited-time offers.
   A row of outlined tiles, one per unit (days / hrs / min / sec),
   with Hanken numerals locked to tabular figures so the digits never
   jump. Drop-in: give .vrl-timer a [data-vrl-deadline="<ISO date>"]
   and load vrl-timer.js — it renders + ticks the tiles for you.
   Pair with a green .vrl-chip eyebrow ("Ends in") above it; the chip
   carries the urgency so the tiles can stay clean ink-on-paper.
   ============================================================ */
.vrl-timer {
  display: inline-flex;
  align-items: stretch;
  gap: 12px;
  font-family: var(--vrl-font-display);
}
.vrl-timer__unit {
  min-width: 88px;
  background: #fff;
  border: var(--vrl-stroke-sticker);
  border-radius: var(--vrl-radius-lg);
  box-shadow: var(--vrl-shadow-sticker);
  padding: 16px 14px 12px;
  text-align: center;
}
.vrl-timer__num {
  font-family: var(--vrl-font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vrl-ink-900);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.vrl-timer__label {
  font-family: var(--vrl-font-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vrl-ink-500);
  margin-top: 9px;
}

/* Large — hero placement. */
.vrl-timer--lg .vrl-timer__unit { min-width: 108px; padding: 20px 18px 14px; }
.vrl-timer--lg .vrl-timer__num { font-size: 66px; }

/* Small — top announcement bar / inline. */
.vrl-timer--sm { gap: 8px; }
.vrl-timer--sm .vrl-timer__unit { min-width: 52px; padding: 8px 8px 6px; border-width: 2px; box-shadow: var(--vrl-shadow-sticker-sm); border-radius: var(--vrl-radius-md); }
.vrl-timer--sm .vrl-timer__num { font-size: 26px; }
.vrl-timer--sm .vrl-timer__label { font-size: 8px; letter-spacing: 0.1em; margin-top: 4px; }

/* Ink variant — for dark sections. Offset shadow switches to deck green
   so the tiles still pop off near-black; numerals go white. */
.vrl-timer--ink .vrl-timer__unit {
  background: var(--vrl-ink-900);
  border-color: #000;
  box-shadow: 5px 5px 0 var(--vrl-green-500);
}
.vrl-timer--ink .vrl-timer__num { color: #fff; }
.vrl-timer--ink .vrl-timer__label { color: rgba(255,255,255,0.55); }
.vrl-timer--ink.vrl-timer--lg .vrl-timer__unit { box-shadow: 6px 6px 0 var(--vrl-green-500); }

/* Seconds tile gives a tiny tick each update — JS toggles --tick.
   Held to a 1px nudge; disabled under reduced-motion. */
@keyframes vrl-tick { 0% { transform: translateY(0.5px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .vrl-timer__num--tick { animation: vrl-tick 220ms var(--vrl-ease-out); }
}

/* Expired state — tiles dim, paired message shows via JS. */
.vrl-timer--expired .vrl-timer__unit { opacity: 0.45; }

/* ============================================================
   ALIGNMENT UTILITIES — locked-in deck rule.
   Centered display headlines + left-aligned long-form body.
   ============================================================ */
.vrl-align-center { text-align: center; }
.vrl-align-left   { text-align: left; }
.vrl-prose-left   { text-align: left; max-width: 60ch; }