/* _ds/wynova-design-system-439e28ef-ab4d-4ebd-87cf-ac313ac9e4b0/tokens/fonts.css */
/* =============================================================
   WYnova — Webfonts
   Brand type is DM Sans (display + body) and DM Mono (labels,
   eyebrows, code, the WYgroup endorsement). Self-hosted from
   /assets/fonts (same files Google Fonts serves; no third-party
   request before consent). DM Sans replaces Gilroy/Poppins from the
   original brand book per the v0.1 design-system spec.
   ============================================================= */

/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-italic-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-italic-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-normal-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* _ds/wynova-design-system-439e28ef-ab4d-4ebd-87cf-ac313ac9e4b0/tokens/colors.css */
/* =============================================================
   WYnova — Color tokens
   Dark indigo is the default surface. Purple is the only action
   color. Lime is a punctuation mark (one per screen, never CTAs).
   The full-spectrum WY mark gradient is the shared WYgroup
   identity and lives only in the logo / brand-mark assets.
   ============================================================= */

:root {
  /* ---------- Brand · core ---------- */
  --wy-color-indigo:        #0F022D;  /* primary dark surface */
  --wy-color-purple:        #905BF4;  /* brand primary / action */
  --wy-color-violet-700:    #4E2BCD;  /* brand deep, active states */
  --wy-color-lavender-300:  #AA7DFF;  /* secondary text on dark, decorative */
  --wy-color-lavender-100:  #E1D2FF;  /* muted text on dark, soft surfaces */
  --wy-color-lime:          #C0FF00;  /* high-energy accent — sparingly */
  --wy-color-off-white:     #EFEFEF;  /* primary light surface */

  /* wynova-green / wygroup-green — Figma Variables */
  --wy-color-wynova-green:  #C0FF00;  /* == lime */
  --wy-color-wygroup-green: #D7F781;  /* softer group accent */

  /* ---------- Brand mark gradient stops (logo only) ---------- */
  --wy-mark-orange:  #F9A21B;
  --wy-mark-amber:   #F47B20;
  --wy-mark-pink:    #EC2C7A;
  --wy-mark-coral:   #F2552E;
  --wy-mark-cyan:    #16E0D2;
  --wy-mark-blue:    #1FA2FF;
  --wy-mark-violet:  #9B36E0;

  /* ---------- Neutral ramp (extension — not in brand book) ---------- */
  --wy-neutral-50:   #F7F6F2;
  --wy-neutral-100:  #EDEBE3;
  --wy-neutral-200:  #D9D6CC;
  --wy-neutral-300:  #B4B2A9;
  --wy-neutral-400:  #8C8B83;
  --wy-neutral-500:  #5F5E5A;
  --wy-neutral-600:  #444441;
  --wy-neutral-700:  #2C2C2A;
  --wy-neutral-800:  #1B1B1A;
  --wy-neutral-900:  #0F0F0E;

  /* ---------- Semantic (extension) ---------- */
  --wy-success:      #22C55E;
  --wy-success-bg:   #103024;
  --wy-warning:      #F59E0B;
  --wy-warning-bg:   #3A2A09;
  --wy-error:        #EF4444;
  --wy-error-bg:     #3A1414;
  --wy-info:         #AA7DFF;       /* reuses lavender-300 */
  --wy-info-bg:      #1F1248;

  /* ---------- Surface · dark mode (default) ---------- */
  --wy-bg:           var(--wy-color-indigo);
  --wy-bg-elevated:  #1A0A3D;       /* slightly lifted card */
  --wy-bg-muted:     #160833;       /* subtle bands */
  --wy-text:         var(--wy-color-off-white);
  --wy-text-muted:   var(--wy-color-lavender-100);
  --wy-text-subtle:  #9D8FCB;
  --wy-border:       rgba(170, 125, 255, 0.20);
  --wy-border-strong:rgba(170, 125, 255, 0.40);
  --wy-surface-card: rgba(239, 239, 239, 0.04);

  /* ---------- Brand interactions ---------- */
  --wy-action:           var(--wy-color-purple);
  --wy-action-hover:     #A371FF;
  --wy-action-active:    var(--wy-color-violet-700);
  --wy-action-on:        var(--wy-color-off-white);

  /* ---------- Logo mark ---------- */
  --wy-mark-gradient: linear-gradient(100deg, var(--wy-mark-orange), var(--wy-mark-pink) 38%, var(--wy-mark-cyan) 62%, var(--wy-mark-blue) 88%, var(--wy-mark-violet));
}

/* ---------- Light-surface variant (opt-in) ---------- */
[data-surface="light"] {
  --wy-bg:           var(--wy-color-off-white);
  --wy-bg-elevated:  #FFFFFF;
  --wy-bg-muted:     #F7F6F2;
  --wy-text:         var(--wy-color-indigo);
  --wy-text-muted:   var(--wy-neutral-500);
  --wy-text-subtle:  #63625C;        /* AA on every light surface (neutral-400 was 2.8:1) */
  --wy-border:       var(--wy-neutral-200);
  --wy-border-strong:var(--wy-neutral-300);
  --wy-surface-card: #FFFFFF;

  /* Accessible purple for light surfaces. #905BF4 is 3.5:1 on lavender and
     3.7:1 under white text; #7240DE is >= 4.5:1 on white, #EFEFEF, #EDE6FF
     and #E4DAFF, and 6:1 under white text. Dark surfaces keep #905BF4.
     The action tokens are re-declared because var() resolves where defined. */
  --wy-color-purple:  #7240DE;
  --wy-action:        #7240DE;
  --wy-action-hover:  #5E30C8;
  --wy-action-active: var(--wy-color-violet-700);
  --wy-action-on:     #FFFFFF;
  --wy-footer-heading: var(--wy-color-violet-700);
  --wy-accordion-icon: var(--wy-color-purple);
}

/* _ds/wynova-design-system-439e28ef-ab4d-4ebd-87cf-ac313ac9e4b0/tokens/typography.css */
/* =============================================================
   WYnova — Typography tokens
   DM Sans for display + body; DM Mono only for data (step
   numbers, codes). Weights: 400 + 500 only (700 reserved for stat
   numbers > 32px). Headings carry the hierarchy on their own:
   no eyebrow labels above them (see readme: Type).
   ============================================================= */

:root {
  /* ---------- Families ---------- */
  --wy-font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wy-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wy-font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wy-font-fallback:'Arial', sans-serif;

  /* ---------- Scale ---------- */
  --wy-text-display:  clamp(48px, 6vw, 72px);   /* hero headline — 1 per page */
  --wy-text-h1:       clamp(36px, 4.5vw, 52px);
  --wy-text-h2:       clamp(28px, 3.5vw, 40px);
  --wy-text-h3:       clamp(22px, 2.5vw, 28px);
  --wy-text-h4:       20px;
  --wy-text-lead:     19px;
  --wy-text-body:     16px;
  --wy-text-small:    14px;
  --wy-text-caption:  12px;
  --wy-text-eyebrow:  11px;

  /* ---------- Weight ---------- */
  --wy-weight-regular: 400;
  --wy-weight-medium:  500;
  --wy-weight-bold:    700;

  /* ---------- Leading & tracking ---------- */
  --wy-leading-tight: 1.05;
  --wy-leading-snug:  1.2;
  --wy-leading-base:  1.5;
  --wy-leading-loose: 1.7;
  --wy-tracking-tight:  -0.015em;
  --wy-tracking-base:   0;
  --wy-tracking-wide:   0.04em;
  --wy-tracking-wider:  0.08em;
  --wy-tracking-widest: 0.14em;   /* eyebrow / mono labels */
}

/* _ds/wynova-design-system-439e28ef-ab4d-4ebd-87cf-ac313ac9e4b0/tokens/spacing.css */
/* =============================================================
   WYnova — Spacing & layout tokens
   4px base scale. Never use values between these steps.
   ============================================================= */

:root {
  /* ---------- Spacing scale (4px base) ---------- */
  --wy-space-0:   0;
  --wy-space-1:   4px;
  --wy-space-2:   8px;
  --wy-space-3:   12px;
  --wy-space-4:   16px;
  --wy-space-5:   24px;
  --wy-space-6:   32px;
  --wy-space-7:   48px;
  --wy-space-8:   64px;
  --wy-space-9:   96px;
  --wy-space-10:  128px;

  /* ---------- Layout ---------- */
  --wy-container:        1240px;
  --wy-container-narrow: 880px;
  --wy-container-wide:   1480px;
  --wy-gutter:           clamp(24px, 4vw, 48px); /* @kind spacing */

  /* ---------- Breakpoints (reference — use in @media) ---------- */
  --wy-bp-sm:   640px;
  --wy-bp-md:   768px;
  --wy-bp-lg:   1024px;
  --wy-bp-xl:   1280px;
  --wy-bp-2xl:  1536px;
}

/* _ds/wynova-design-system-439e28ef-ab4d-4ebd-87cf-ac313ac9e4b0/tokens/effects.css */
/* =============================================================
   WYnova — Radii, borders, elevation, motion, z-index
   Buttons + badges are always pill. Cards 16–24px. On dark
   surfaces prefer a subtle lavender border over heavy shadow.
   Motion is precise, never bouncy.
   ============================================================= */

:root {
  /* ---------- Border radii ---------- */
  --wy-radius-xs:   4px;
  --wy-radius-sm:   8px;
  --wy-radius-md:   12px;
  --wy-radius-lg:   16px;   /* default card */
  --wy-radius-xl:   24px;   /* hero blocks */
  --wy-radius-2xl:  32px;
  --wy-radius-pill: 9999px;

  /* ---------- Border widths ---------- */
  --wy-border-thin:   1px;
  --wy-border-base:   1.5px;
  --wy-border-thick:  2px;

  /* ---------- Elevation (extension — brand book has no shadows) ---------- */
  --wy-shadow-sm:  0 1px 2px rgba(15, 2, 45, 0.40);
  --wy-shadow-md:  0 6px 24px rgba(15, 2, 45, 0.40);
  --wy-shadow-lg:  0 16px 48px rgba(15, 2, 45, 0.45);
  --wy-glow:       0 0 0 4px rgba(144, 91, 244, 0.25);   /* purple focus ring */
  --wy-glow-lime:  0 0 0 4px rgba(192, 255, 0, 0.30);

  /* ---------- Motion ---------- */
  --wy-duration-fast:    120ms; /* @kind other */
  --wy-duration-base:    200ms; /* @kind other */
  --wy-duration-slow:    360ms; /* @kind other */
  --wy-ease:             cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --wy-ease-in:          cubic-bezier(0.5, 0, 0.75, 0); /* @kind other */
  --wy-ease-out:         cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  /* ---------- Z-index scale ---------- */
  --wy-z-base:     1; /* @kind other */
  --wy-z-sticky:   100; /* @kind other */
  --wy-z-dropdown: 200; /* @kind other */
  --wy-z-overlay:  900; /* @kind other */
  --wy-z-modal:    1000; /* @kind other */
  --wy-z-toast:    1100; /* @kind other */
  --wy-z-tooltip:  1200; /* @kind other */
}

/* _ds/wynova-design-system-439e28ef-ab4d-4ebd-87cf-ac313ac9e4b0/tokens/base.css */
/* =============================================================
   WYnova — Base reset + brand utilities (opinionated, optional)
   ============================================================= */

html { font-family: var(--wy-font-body); color: var(--wy-text); background: var(--wy-bg); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-size: var(--wy-text-body); line-height: var(--wy-leading-base); }
h1, h2, h3, h4, h5, h6 { font-family: var(--wy-font-display); font-weight: var(--wy-weight-medium); letter-spacing: var(--wy-tracking-tight); line-height: var(--wy-leading-tight); margin: 0 0 var(--wy-space-4); }
p { margin: 0 0 var(--wy-space-4); }
a { color: var(--wy-color-lavender-300); text-decoration: none; transition: color var(--wy-duration-fast) var(--wy-ease); }
a:hover { color: var(--wy-color-purple); }
*:focus-visible { outline: none; box-shadow: var(--wy-glow); border-radius: var(--wy-radius-xs); }

/* Mono eyebrow utility — the WYnova section kicker */
.wy-eyebrow { font-family: var(--wy-font-mono); font-size: var(--wy-text-eyebrow); text-transform: uppercase; letter-spacing: var(--wy-tracking-widest); color: var(--wy-color-lime); font-weight: var(--wy-weight-medium); }

/* WYgroup endorsement string */

/* ---------- Button states (Button renders inline styles, so !important) ---------- */
.wy-btn:focus-visible { outline: 3px solid var(--wy-color-lime); outline-offset: 2px; }
[data-surface="light"] .wy-btn:focus-visible { outline-color: var(--wy-color-violet-700); }
.wy-btn--primary:hover { background: var(--wy-action-hover) !important; }
.wy-btn--primary:active { background: var(--wy-action-active) !important; transform: translateY(1px); }
.wy-btn--secondary:hover { border-color: var(--wy-color-purple) !important; background: rgba(144, 91, 244, 0.08) !important; }
.wy-btn--accent:hover { filter: brightness(0.94); }
@media (prefers-reduced-motion: reduce) { .wy-btn--primary:active { transform: none; } }
[data-surface="light"] .wy-cta-dark .wy-btn:focus-visible { outline-color: var(--wy-color-lime); }

/* assets/icons/tabler-icons-subset.css */
/*!
 * Tabler Icons 3.7.0 by tabler - https://tabler.io
 * License - https://github.com/tabler/tabler-icons/blob/master/LICENSE
 *
 * WYnova subset: only the icons the site uses (regenerate when adding one;
 * tests/assets.spec.js fails if a page uses an icon that is not here).
 */
@font-face{font-family:"tabler-icons";font-style:normal;font-weight:400;font-display:block;src:url("/assets/icons/tabler-icons-subset.woff2?v3.7.0") format("woff2")}
.ti{font-family:"tabler-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ti-affiliate:before{content:"\edff"}
.ti-alarm-off:before{content:"\f0a9"}
.ti-alert-triangle:before{content:"\ea06"}
.ti-archive-off:before{content:"\f0ad"}
.ti-arrow-back-up:before{content:"\eb77"}
.ti-arrow-right:before{content:"\ea1f"}
.ti-arrows-shuffle:before{content:"\f000"}
.ti-binary-tree:before{content:"\f5d4"}
.ti-bolt:before{content:"\ea38"}
.ti-book:before{content:"\ea39"}
.ti-books:before{content:"\eff2"}
.ti-brain:before{content:"\f59f"}
.ti-brand-linkedin:before{content:"\ec8c"}
.ti-briefcase:before{content:"\ea46"}
.ti-broadcast:before{content:"\f1e9"}
.ti-building-community:before{content:"\ebf6"}
.ti-building-skyscraper:before{content:"\ec39"}
.ti-building-store:before{content:"\ea4e"}
.ti-bulb:before{content:"\ea51"}
.ti-businessplan:before{content:"\ee1e"}
.ti-calculator-off:before{content:"\f0c4"}
.ti-calendar-x:before{content:"\f832"}
.ti-chart-bar:before{content:"\ea59"}
.ti-chart-bar-off:before{content:"\f3d2"}
.ti-chart-dots:before{content:"\ee2f"}
.ti-chart-histogram:before{content:"\f65c"}
.ti-check:before{content:"\ea5e"}
.ti-checklist:before{content:"\f074"}
.ti-checkup-list:before{content:"\ef5a"}
.ti-chevron-down:before{content:"\ea5f"}
.ti-chevron-up:before{content:"\ea62"}
.ti-circle:before{content:"\ea6b"}
.ti-clipboard-off:before{content:"\f0ce"}
.ti-clock:before{content:"\ea70"}
.ti-clock-exclamation:before{content:"\f847"}
.ti-clock-hour-4:before{content:"\f319"}
.ti-clock-hour-8:before{content:"\f31d"}
.ti-clock-pause:before{content:"\f548"}
.ti-code:before{content:"\ea77"}
.ti-compass-off:before{content:"\f0d5"}
.ti-copy:before{content:"\ea7a"}
.ti-dashboard:before{content:"\ea87"}
.ti-database:before{content:"\ea88"}
.ti-database-off:before{content:"\ee70"}
.ti-database-search:before{content:"\fa18"}
.ti-device-mobile:before{content:"\ea8a"}
.ti-device-mobile-code:before{content:"\f8b0"}
.ti-diamond:before{content:"\eb65"}
.ti-engine-off:before{content:"\f120"}
.ti-eye:before{content:"\ea9a"}
.ti-eye-off:before{content:"\ecf0"}
.ti-eye-search:before{content:"\fb78"}
.ti-file-analytics:before{content:"\ede7"}
.ti-file-export:before{content:"\ede9"}
.ti-file-invoice:before{content:"\eb67"}
.ti-file-spreadsheet:before{content:"\f03e"}
.ti-file-stack:before{content:"\f503"}
.ti-file-text:before{content:"\eaa2"}
.ti-file-unknown:before{content:"\f042"}
.ti-file-x:before{content:"\eaa3"}
.ti-flask:before{content:"\ebd2"}
.ti-folders:before{content:"\eaae"}
.ti-folders-off:before{content:"\f133"}
.ti-gas-station:before{content:"\ec7d"}
.ti-git-compare:before{content:"\eab4"}
.ti-hand-stop:before{content:"\ec2e"}
.ti-headset:before{content:"\eb90"}
.ti-history:before{content:"\ebea"}
.ti-language:before{content:"\ebbe"}
.ti-layout-dashboard:before{content:"\f02c"}
.ti-layout-grid:before{content:"\edba"}
.ti-list-check:before{content:"\eb6a"}
.ti-lock:before{content:"\eae2"}
.ti-lock-open:before{content:"\eae1"}
.ti-mail:before{content:"\eae5"}
.ti-mail-off:before{content:"\f15a"}
.ti-map-2:before{content:"\eae7"}
.ti-map-pin:before{content:"\eae8"}
.ti-map-pin-filled:before{content:"\f680"}
.ti-map-pin-off:before{content:"\ecf3"}
.ti-message:before{content:"\eaef"}
.ti-message-chatbot:before{content:"\f38a"}
.ti-message-code:before{content:"\f013"}
.ti-message-off:before{content:"\ed41"}
.ti-microphone:before{content:"\eaf0"}
.ti-mood-empty:before{content:"\eeb5"}
.ti-mood-nervous:before{content:"\ef96"}
.ti-mood-sad:before{content:"\eaf6"}
.ti-notes:before{content:"\eb6e"}
.ti-palette:before{content:"\eb01"}
.ti-phone:before{content:"\eb09"}
.ti-photo:before{content:"\eb0a"}
.ti-plane-departure:before{content:"\eb9a"}
.ti-plug:before{content:"\ebd9"}
.ti-plug-connected:before{content:"\f00a"}
.ti-presentation:before{content:"\eb70"}
.ti-puzzle:before{content:"\eb10"}
.ti-puzzle-off:before{content:"\f186"}
.ti-receipt:before{content:"\edfd"}
.ti-receipt-off:before{content:"\edfb"}
.ti-refresh:before{content:"\eb13"}
.ti-refresh-off:before{content:"\f18d"}
.ti-report:before{content:"\eece"}
.ti-robot:before{content:"\f00b"}
.ti-rotate-2:before{content:"\ebb4"}
.ti-route:before{content:"\eb17"}
.ti-route-off:before{content:"\f194"}
.ti-ruler-2:before{content:"\eed2"}
.ti-scale:before{content:"\ebc2"}
.ti-scan:before{content:"\ebc8"}
.ti-school:before{content:"\ecf7"}
.ti-search:before{content:"\eb1c"}
.ti-settings:before{content:"\eb20"}
.ti-settings-automation:before{content:"\eed6"}
.ti-shield-check:before{content:"\eb22"}
.ti-shield-lock:before{content:"\ed58"}
.ti-shield-off:before{content:"\ecf8"}
.ti-sparkles:before{content:"\f6d7"}
.ti-stack-2:before{content:"\eef7"}
.ti-stairs-up:before{content:"\eca5"}
.ti-tags:before{content:"\ef86"}
.ti-target-arrow:before{content:"\f51a"}
.ti-template:before{content:"\eb39"}
.ti-transform:before{content:"\f38e"}
.ti-trash:before{content:"\eb41"}
.ti-user-check:before{content:"\eb49"}
.ti-user-minus:before{content:"\eb4a"}
.ti-user-x:before{content:"\eb4c"}
.ti-users:before{content:"\ebf2"}
.ti-users-group:before{content:"\fa21"}
.ti-vector:before{content:"\eca9"}
.ti-volume:before{content:"\eb51"}
.ti-wall:before{content:"\ef7a"}
.ti-wifi-off:before{content:"\ecfa"}

/* assets/motion.css */
/* =============================================================
   Motion and the code-native visuals (Phase C). The only file with
   keyframes, scroll timelines and 3D transforms (see CLAUDE.md).

   Every piece renders its final state in the static HTML. The start
   states below apply only under html.wy-motion, which the head script
   in Layout.astro sets when motion is allowed and drops again if
   motion.js never arrives. Reduced motion = the final state, still.

     .wy-flow    FlowDiagram: a process drawn as a line with stations
     .wy-panel   ProductPanel: what a system does, recreated in HTML
     .wy-story   ScrollStory: phases x lanes, pinned on desktop
     .wy-arch    ArchStack: the L1/L2/L3 layers in 3D
     .wy-ink     ScrollStatement: one sentence inked by scroll
     .wy-mini    the small visuals in the service rows
   ============================================================= */

:root {
  --wy-m-step: 380ms;              /* the pace of a build-in */
  --wy-m-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- indigo band (hero and proof sections) ---------- */
.wy-band { background: var(--wy-color-indigo); color: var(--wy-color-off-white); border-radius: 4px; }
.wy-band { --wy-text: var(--wy-color-off-white); --wy-text-muted: var(--wy-color-lavender-100); --wy-line: rgba(225, 210, 255, 0.28); --wy-line-strong: rgba(225, 210, 255, 0.5); }

/* =============================================================
   FlowDiagram
   ============================================================= */
.wy-flow { margin: 0; --gap: 24px; --line: var(--wy-line, var(--wy-border-strong)); --ink: var(--wy-text); }
.wy-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 var(--gap); }
.wy-flow-node { position: relative; padding-top: 28px; min-width: 0; overflow-wrap: break-word; }
.wy-flow-port { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink); background: var(--wy-color-indigo); z-index: 1; }
.wy-flow--light .wy-flow-port { background: var(--wy-bg); }
.wy-flow-node.is-ai .wy-flow-port { background: var(--wy-color-lime); border-color: var(--wy-color-lime); }
.wy-flow--light .wy-flow-node.is-ai .wy-flow-port { background: var(--wy-color-violet-700); border-color: var(--wy-color-violet-700); }
.wy-flow-rail { position: absolute; top: 5px; left: 11px; width: calc(100% + var(--gap) - 11px); height: 1px; background: var(--line); clip-path: inset(-4px 0); transform-origin: 0 50%; }
.wy-flow-node:last-child .wy-flow-rail { display: none; }
.wy-flow-rail i { position: absolute; inset: 0; transform: translateX(-100%); }
.wy-flow-rail i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.wy-flow-idx { display: block; font-family: var(--wy-font-mono); font-size: 12px; line-height: 1; color: var(--wy-text-muted); margin-bottom: 10px; }
.wy-flow-node h3 { font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); }
.wy-flow-node p { font-size: 14px; line-height: 1.5; color: var(--wy-text-muted); margin: 0; }
.wy-flow-tag { display: inline-block; font-family: var(--wy-font-mono); font-size: 11px; line-height: 1; padding: 2px 5px; margin-left: 8px; vertical-align: 2px; border-radius: 4px; color: var(--wy-color-lavender-100); border: 1px solid var(--wy-color-lavender-300); }
.wy-flow--light .wy-flow-tag { color: var(--wy-color-violet-700); border-color: var(--wy-color-violet-700); }
.wy-flow-names { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--wy-font-mono); font-size: 12px; line-height: 1.5; color: var(--wy-text-muted); }
.wy-flow > figcaption { font-size: 13px; line-height: 1.45; color: var(--wy-text-muted); margin-top: 28px; }

/* build-in: rails draw, stations light up one after the other */
.wy-motion .wy-flow:not(.is-run) .wy-flow-node { opacity: 0.32; }
.wy-motion .wy-flow:not(.is-run) .wy-flow-rail { transform: scaleX(0); }
.wy-motion .wy-flow .wy-flow-node { transition: opacity var(--wy-m-step) var(--wy-m-ease) calc(var(--i) * 260ms); }
.wy-motion .wy-flow .wy-flow-rail { transition: transform 520ms var(--wy-m-ease) calc(var(--i) * 260ms + 140ms); }
/* the live loop: one packet per rail, only while the diagram is on screen */
.wy-motion .wy-flow.is-run .wy-flow-rail i { animation: wy-flow-x 2.6s cubic-bezier(0.6, 0, 0.4, 1) calc(var(--i) * 0.65s + 1.4s) infinite; animation-play-state: paused; }
.wy-motion .wy-flow.is-run.is-in .wy-flow-rail i { animation-play-state: running; }
@keyframes wy-flow-x { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

@media (max-width: 760px) {
  .wy-flow-steps { grid-template-columns: minmax(0, 1fr); gap: var(--gap) 0; }
  .wy-flow-node { padding: 0 0 0 32px; }
  .wy-flow-rail { top: 11px; left: 5px; width: 1px; height: calc(100% + var(--gap) - 11px); clip-path: inset(0 -4px); transform-origin: 50% 0; }
  .wy-flow-rail i { transform: translateY(-100%); }
  .wy-flow-rail i::after { top: auto; bottom: 0; right: -2px; }
  .wy-motion .wy-flow:not(.is-run) .wy-flow-rail { transform: scaleY(0); }
  .wy-motion .wy-flow.is-run .wy-flow-rail i { animation-name: wy-flow-y; }
}
@keyframes wy-flow-y { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }

/* =============================================================
   ProductPanel
   ============================================================= */
.wy-panel { margin: 0; overflow-wrap: break-word; }
.wy-panel-win { background: #fff; color: var(--wy-color-indigo); border: 1px solid var(--wy-neutral-300); border-radius: 4px; overflow: hidden; font-size: 14px; line-height: 1.5; }
.wy-panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--wy-neutral-200); font-family: var(--wy-font-mono); font-size: 12px; color: var(--wy-neutral-500); }
.wy-panel-bar b { font-weight: 400; color: var(--wy-color-indigo); }
.wy-panel-live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wy-panel-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wy-color-violet-700); }
.wy-panel-body { padding: 20px 16px 18px; display: grid; gap: 14px; }
.wy-panel > figcaption { font-size: 13px; line-height: 1.45; color: var(--wy-text-muted); margin-top: 14px; }
.wy-panel-k { font-family: var(--wy-font-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.02em; color: var(--wy-neutral-500); margin: 0 0 4px; }

/* answer */
.wy-panel-q { justify-self: end; max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 4px; background: var(--wy-color-indigo); color: var(--wy-color-off-white); }
.wy-panel-a { margin: 0; font-size: 15px; line-height: 1.55; }
.wy-panel-src { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--wy-neutral-200); display: grid; gap: 4px; font-family: var(--wy-font-mono); font-size: 12px; color: var(--wy-neutral-500); counter-reset: src; }
.wy-panel-src li { counter-increment: src; overflow-wrap: break-word; }
.wy-panel-src li::before { content: "[" counter(src) "] "; color: var(--wy-color-violet-700); }

/* extract */
.wy-panel-doc { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
.wy-panel-page { position: relative; aspect-ratio: 3 / 4; border: 1px solid var(--wy-neutral-300); border-radius: 4px; padding: 10px 9px; display: grid; align-content: start; gap: 6px; overflow: hidden; background: var(--wy-neutral-50); }
.wy-panel-page span { display: block; height: 4px; border-radius: 2px; background: var(--wy-neutral-200); }
.wy-panel-page span:nth-child(3n) { width: 70%; }
.wy-panel-page span:nth-child(4n+1) { width: 86%; }
.wy-panel-page span.is-hit { background: var(--wy-color-purple); }
.wy-panel-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wy-color-violet-700); opacity: 0; }
.wy-panel-fields { margin: 0; display: grid; gap: 0; }
.wy-panel-fields > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--wy-neutral-200); }
.wy-panel-fields dt { font-size: 12px; color: var(--wy-neutral-500); grid-column: 1 / -1; }
.wy-panel-fields dd { margin: 0; font-weight: 500; overflow-wrap: break-word; }
.wy-panel-fields .wy-panel-conf { font-family: var(--wy-font-mono); font-size: 12px; font-weight: 400; color: var(--wy-color-violet-700); align-self: end; }

/* approve */
.wy-panel-queue { list-style: none; margin: 0; padding: 0; }
.wy-panel-queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--wy-neutral-200); }
.wy-panel-queue li:first-child { border-top: 0; }
.wy-panel-queue .t { font-weight: 500; overflow-wrap: break-word; }
.wy-panel-queue .m { font-size: 12px; color: var(--wy-neutral-500); grid-column: 1; }
.wy-panel-state { grid-column: 2; grid-row: 1 / span 2; position: relative; font-family: var(--wy-font-mono); font-size: 12px; white-space: nowrap; }
.wy-panel-state > span { display: inline-block; padding: 3px 8px; border-radius: 9999px; border: 1px solid var(--wy-neutral-300); color: var(--wy-neutral-500); }
.wy-panel-state > .is-done { border-color: var(--wy-color-violet-700); background: var(--wy-color-violet-700); color: #fff; }
.wy-panel-state > .is-wait { position: absolute; right: 0; top: 0; opacity: 0; }
.wy-panel-who { margin: 0; padding-top: 10px; border-top: 1px solid var(--wy-neutral-200); font-size: 12px; color: var(--wy-neutral-500); }

/* panel motion: rows arrive, the answer streams, fields fill, a status flips */
.wy-motion .wy-panel [data-seq] { transition: opacity 320ms var(--wy-m-ease), transform 320ms var(--wy-m-ease); }
.wy-motion .wy-panel:not(.is-run) [data-seq] { opacity: 0; transform: translateY(6px); }
.wy-motion .wy-panel .wy-panel-a .w { transition: opacity 160ms linear; }
.wy-motion .wy-panel.is-streaming .wy-panel-a .w:not(.on) { opacity: 0; }
.wy-motion .wy-panel.is-scanning .wy-panel-scan { opacity: 1; animation: wy-scan 1.6s cubic-bezier(0.5, 0, 0.5, 1) 1; }
@keyframes wy-scan { from { transform: translateY(0); } to { transform: translateY(150px); } }
.wy-motion .wy-panel.is-pending .wy-panel-state > .is-done { opacity: 0; }
.wy-motion .wy-panel.is-pending .wy-panel-state > .is-wait { opacity: 1; }
.wy-motion .wy-panel .wy-panel-state > span { transition: opacity 240ms linear; }
.wy-panel.is-reset [data-seq], .wy-panel.is-reset .w, .wy-panel.is-reset .wy-panel-state > span { transition: none !important; }

/* =============================================================
   ScrollStory: steps on the left, the board pinned on the right
   ============================================================= */
.wy-story { overflow-wrap: break-word; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 56px; align-items: start; }
.wy-story-steps { list-style: none; margin: 0; padding: 0; }
.wy-story-step { padding: 32px 0 30vh; border-top: 1px solid var(--wy-border-strong); }
.wy-story-step:last-child { padding-bottom: 32px; }
.wy-story-idx { display: block; font-family: var(--wy-font-mono); font-size: 13px; color: var(--wy-color-violet-700); margin-bottom: 10px; }
.wy-story-step h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 8px; }
.wy-story-when { font-family: var(--wy-font-mono); font-size: 13px; color: var(--wy-text-muted); margin: 0 0 14px; }
.wy-story-step > p { font-size: 17px; line-height: 1.55; color: var(--wy-text); margin: 0; max-width: 44ch; }
.wy-story-step h3, .wy-story-idx { transition: color 240ms linear; }

.wy-story-board { position: sticky; top: 112px; display: grid; grid-template-columns: 112px repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--wy-border-strong); font-size: 13px; line-height: 1.45; }
.wy-story-board > * { padding: 12px 12px 14px; border-bottom: 1px solid var(--wy-border-strong); transition: background-color 240ms linear, color 240ms linear, opacity 240ms linear; }
.wy-story-board > .h { font-weight: 500; font-size: 14px; }
.wy-story-board > .h b { display: block; font-family: var(--wy-font-mono); font-weight: 400; font-size: 12px; color: var(--wy-color-violet-700); }
.wy-story-board > .lane { font-weight: 500; padding-left: 0; }
.wy-story-board > .c { color: var(--wy-text); }

/* mini board per step: the mobile layout, and what screen readers get */
.wy-story-mini { margin: 20px 0 0; display: grid; gap: 0; }
.wy-story-mini > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--wy-border); font-size: 15px; line-height: 1.45; }
.wy-story-mini dt { color: var(--wy-text-muted); font-size: 13px; padding-top: 2px; }
.wy-story-mini dd { margin: 0; }
@media (min-width: 961px) {
  .wy-story-mini { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 960px) {
  .wy-story { grid-template-columns: minmax(0, 1fr); }
  .wy-story-board { display: none; }
  .wy-story-step { padding-bottom: 32px; }
}
/* the active phase: its column gets a white ground and an indigo rule on top;
   nothing is dimmed, every cell stays at full contrast */
.wy-story-board > .h { box-shadow: inset 0 2px 0 transparent; }
.wy-story[data-active="0"] .wy-story-board > [data-col="0"],
.wy-story[data-active="1"] .wy-story-board > [data-col="1"],
.wy-story[data-active="2"] .wy-story-board > [data-col="2"],
.wy-story[data-active="3"] .wy-story-board > [data-col="3"],
.wy-story[data-active="4"] .wy-story-board > [data-col="4"]
{ background: var(--wy-bg-elevated); }
.wy-story[data-active="0"] .wy-story-board > .h[data-col="0"],
.wy-story[data-active="1"] .wy-story-board > .h[data-col="1"],
.wy-story[data-active="2"] .wy-story-board > .h[data-col="2"],
.wy-story[data-active="3"] .wy-story-board > .h[data-col="3"],
.wy-story[data-active="4"] .wy-story-board > .h[data-col="4"]
{ box-shadow: inset 0 2px 0 var(--wy-color-indigo); }
.wy-story-idx { color: var(--wy-text-muted); }
.wy-story-step.is-active .wy-story-idx, .wy-story:not([data-active]) .wy-story-idx { color: var(--wy-color-violet-700); }
.wy-story-board .lane, .wy-story-board .h { display: block; }
.wy-story-board .wy-icon, .wy-story-mini dt .wy-icon { display: block; margin-bottom: 6px; color: var(--wy-color-violet-700); }
.wy-story-step h3 .wy-icon { vertical-align: -2px; margin-right: 10px; color: var(--wy-color-violet-700); }

/* =============================================================
   ArchStack: three layers in 3D, the list beside them is the text
   ============================================================= */
.wy-arch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.wy-arch-stage { position: relative; height: 440px; perspective: 1600px; perspective-origin: 50% 30%; }
.wy-arch-planes { position: absolute; left: 50%; top: 56%; width: 300px; height: 300px; margin: -150px 0 0 -150px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-40deg); }
.wy-arch-plane { position: absolute; inset: 0; border: 1px solid var(--wy-line-strong, var(--wy-border-strong)); border-radius: 4px; background: #1A0A3D; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 10px; padding: 26px; transform: translateZ(calc(var(--l) * 96px)); transition: transform 900ms var(--wy-m-ease) calc(var(--l) * 120ms), border-color 200ms linear, background-color 200ms linear; }
.wy-arch-plane.is-ours { background: var(--wy-color-violet-700); border-color: var(--wy-color-lavender-300); }
.wy-arch-plane span { display: block; font-family: var(--wy-font-mono); font-size: 13px; line-height: 1; padding: 9px 8px; border: 1px solid var(--wy-line, var(--wy-border)); border-radius: 4px; color: var(--wy-color-lavender-100); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wy-arch-plane.is-ours span { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.wy-arch-plane b { position: absolute; left: 14px; top: 10px; font-family: var(--wy-font-mono); font-weight: 400; font-size: 12px; color: var(--wy-color-lavender-300); }
.wy-arch-plane.is-ours b { color: var(--wy-color-lime); }
.wy-motion .wy-arch:not(.is-run) .wy-arch-plane { transform: translateZ(calc(var(--l) * 14px)); }

.wy-arch-list { list-style: none; margin: 0; padding: 0; }
.wy-arch-list > li { overflow-wrap: break-word; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 20px 0; border-top: 1px solid var(--wy-line-strong, var(--wy-border-strong)); outline: none; }
.wy-arch-list > li:last-child { border-bottom: 1px solid var(--wy-line-strong, var(--wy-border-strong)); }
.wy-arch-list .code { font-family: var(--wy-font-mono); font-size: 13px; line-height: 1.7; color: var(--wy-color-lavender-300); }
.wy-arch-list h3 { font-size: 20px; line-height: 1.3; font-weight: 500; margin: 0 0 6px; color: var(--wy-text); transition: color 200ms linear; }
.wy-arch-list p { font-size: 15px; line-height: 1.55; color: var(--wy-text-muted); margin: 0; }
.wy-arch-list .is-ours .code { color: var(--wy-color-lime); }
.wy-arch-list p.tag { font-size: 13px; color: var(--wy-color-lime); margin: 0 0 4px; }
.wy-arch-list > li:focus-visible { outline: 2px solid var(--wy-color-lavender-100); outline-offset: 4px; }
/* pointing at a layer (or focusing it) picks out its plane */
.wy-arch:has(.wy-arch-list > li[data-l="0"]:is(:hover, :focus-visible)) .wy-arch-plane[data-l="0"],
.wy-arch:has(.wy-arch-list > li[data-l="1"]:is(:hover, :focus-visible)) .wy-arch-plane[data-l="1"],
.wy-arch:has(.wy-arch-list > li[data-l="2"]:is(:hover, :focus-visible)) .wy-arch-plane[data-l="2"] { border-color: var(--wy-color-off-white); }
.wy-arch-list > li:is(:hover, :focus-visible) h3 { color: var(--wy-color-lavender-100); }
.wy-arch-rail { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; color: var(--wy-text-muted); }
.wy-arch-rail li { display: flex; gap: 10px; align-items: baseline; }
.wy-arch-rail li::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; flex: none; transform: translateY(-1px); }
@media (max-width: 960px) {
  .wy-arch { grid-template-columns: minmax(0, 1fr); }
  .wy-arch-stage { height: 300px; }
  .wy-arch-planes { width: 200px; height: 200px; margin: -100px 0 0 -100px; top: 64%; }
  .wy-arch-plane { padding: 18px; gap: 6px; transform: translateZ(calc(var(--l) * 64px)); transition: none; }
  .wy-arch-plane span { font-size: 11px; padding: 6px 4px; }
  .wy-motion .wy-arch:not(.is-run) .wy-arch-plane { transform: translateZ(calc(var(--l) * 64px)); }
}

/* =============================================================
   ScrollStatement
   ============================================================= */
.wy-ink { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 500; max-width: 24ch; margin: 0; color: var(--wy-text); }
.wy-ink .w { transition: opacity 200ms linear; }
.wy-motion .wy-ink.is-split .w:not(.on) { opacity: 0.22; }

/* =============================================================
   The small visuals in the service rows (always visible; they move
   when the row is pointed at, focused, or on a touch screen in view)
   ============================================================= */
.wy-mini { position: relative; height: 112px; border: 1px solid var(--wy-border-strong); border-radius: 4px; background: var(--wy-bg-elevated); overflow: hidden; }
/* flow: four stations on a line, a packet runs it */
.wy-mini--flow::before { content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 1px; background: var(--wy-color-indigo); opacity: 0.35; }
.wy-mini--flow i { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1px solid var(--wy-color-indigo); background: var(--wy-bg-elevated); }
.wy-mini--flow i:nth-of-type(1) { left: 16%; } .wy-mini--flow i:nth-of-type(2) { left: 38.6%; } .wy-mini--flow i:nth-of-type(3) { left: 61.3%; background: var(--wy-color-violet-700); border-color: var(--wy-color-violet-700); } .wy-mini--flow i:nth-of-type(4) { left: 84%; }
.wy-mini--flow b { position: absolute; left: 16%; right: 16%; top: 50%; height: 1px; overflow: hidden; z-index: 1; }
.wy-mini--flow b::after { content: ""; position: absolute; left: 0; top: 0; width: 28%; height: 1px; background: var(--wy-color-violet-700); transform: translateX(-100%); }
/* stack: three layers, the middle one is ours */
.wy-mini--stack { perspective: 600px; }
.wy-mini--stack span { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 1px solid var(--wy-color-indigo); border-radius: 4px; background: var(--wy-bg-elevated); transform: rotateX(58deg) rotateZ(-40deg) translateZ(calc((var(--l) - 1) * 20px)); transition: transform 600ms var(--wy-m-ease); }
.wy-mini--stack span:nth-child(2) { background: var(--wy-color-violet-700); border-color: var(--wy-color-violet-700); }
/* weeks: a timeline that fills week by week */
.wy-mini--weeks { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 4px; align-content: center; padding: 0 16%; }
.wy-mini--weeks i { height: 18px; border: 1px solid var(--wy-color-indigo); border-radius: 2px; transform-origin: 0 50%; }
.wy-mini--weeks i:nth-child(-n+2) { background: var(--wy-color-indigo); }
.wy-mini--weeks i:nth-last-child(1) { background: var(--wy-color-violet-700); border-color: var(--wy-color-violet-700); }
.wy-mini--weeks i { transition: background-color 120ms linear calc(var(--i) * 70ms); }

/* team: three of ours (filled) beside three of the client's (outline); in motion
   the client's fill one by one: the knowledge handed over */
.wy-mini--team { display: flex; align-items: center; justify-content: center; gap: 14px; }
.wy-mini--team i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--wy-color-indigo); background: transparent; transition: background-color 240ms linear calc((var(--i) - 3) * 260ms); }
.wy-mini--team i:nth-child(-n+3) { background: var(--wy-color-indigo); }
.wy-mini--team i:nth-child(3) { margin-right: 18px; }
.wy-motion .is-live .wy-mini--team i:nth-child(n+4) { background: var(--wy-color-violet-700); border-color: var(--wy-color-violet-700); }

.wy-motion .is-live .wy-mini--flow b::after { animation: wy-mini-run 1.8s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
@keyframes wy-mini-run { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
.wy-motion .is-live .wy-mini--stack span { transform: rotateX(58deg) rotateZ(-40deg) translateZ(calc((var(--l) - 1) * 34px)); }
.wy-motion .is-live .wy-mini--weeks i { background: var(--wy-color-indigo); }
.wy-motion .is-live .wy-mini--weeks i:nth-last-child(1) { background: var(--wy-color-violet-700); }

/* =============================================================
   Page-to-page: a cross-fade, and the case image travels from the
   card into the case page. CSS only; old browsers just navigate.
   ============================================================= */
/* =============================================================
   LogoMarquee: the client logos on a slow loop. Pauses on hover and
   focus; without motion (or JS) it is a static, wrapped row.
   ============================================================= */
.wy-logos { overflow: hidden; }
.wy-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: center; }
.wy-logos li { flex: none; height: 56px; display: flex; align-items: center; }
.wy-logos img { display: block; filter: brightness(0); opacity: 0.72; transition: filter 160ms linear, opacity 160ms linear; }
.wy-logos li:hover img { filter: none; opacity: 1; }
.wy-logos .is-copy, .wy-logos .is-fill { display: none; }
.wy-motion .wy-logos .wy-logos-track { display: flex; width: max-content; animation: wy-marquee 48s linear infinite; }
.wy-motion .wy-logos ul { flex-wrap: nowrap; padding-right: 64px; }
.wy-motion .wy-logos .is-copy { display: flex; }
.wy-motion .wy-logos .is-fill { display: flex; }
/* in motion the loop runs edge to edge, across the whole screen */
.wy-motion .wy-logos { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wy-motion .wy-logos:hover .wy-logos-track, .wy-motion .wy-logos:focus-within .wy-logos-track { animation-play-state: paused; }
@keyframes wy-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 360ms; animation-timing-function: var(--wy-m-ease); }
.wy-vt { view-transition-name: var(--vt); }
.wy-header { view-transition-name: wy-header; }

/* =============================================================
   Reduced motion: everything in its final state, nothing moves
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .wy-flow-rail i, .wy-mini *, .wy-logos-track { animation: none !important; }
}

/* German compounds may hyphenate; Portuguese never splits a word */
:lang(de) .wy-flow-node, :lang(de) .wy-story, :lang(de) .wy-panel, :lang(de) .wy-arch-list { hyphens: auto; }

/* assets/case.css */
/* =============================================================
   Case-study pages (/casos/*): the 9 hand-built pages and the ones
   case-template.js generates for cases created in the CMS.
   Editorial layout: left-aligned on one 1100px grid, real headings,
   no card chrome. The one bold element is the pipeline band.
   ============================================================= */

.wyc-wrap { max-width: 1100px; margin: 0 auto; }

/* ---- Hero: title + facts left, the client's product shot right ---- */
.wyc-hero { padding: 88px var(--wy-gutter) 72px; }
.wyc-hero .wyc-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.wyc-h1 { font-size: clamp(44px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 500; margin: 0 0 24px; color: var(--wy-text); }
.wyc-lead { font-size: 20px; line-height: 1.5; color: var(--wy-text-muted); max-width: 46ch; margin: 0; }
.wyc-facts { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 40px 0 0; padding: 0; }
.wyc-hero-cta { margin-top: 32px; }
.wyc-facts dt { font-size: 13px; line-height: 1.4; color: var(--wy-text-muted); margin: 0 0 4px; }
.wyc-facts dd { font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--wy-text); margin: 0; }
.wyc-facts .is-data dd { font-family: var(--wy-font-mono); font-size: 14px; font-weight: 400; }
.wyc-block .wy-panel { margin-top: 32px; max-width: 560px; }
.wyc-band .wy-flow + .wyc-quote { margin-top: 64px; }
.wyc-facts a { color: var(--wy-color-violet-700); text-decoration: underline; text-underline-offset: 3px; }
.wyc-shot { margin: 0; justify-self: end; max-width: 100%; }
.wyc-shot img { display: block; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 16px 40px rgba(15, 2, 45, 0.14); }
/* unknown size (CMS upload): keep it inside the hero */
.wyc-shot img:not([width]) { max-height: 540px; width: auto; }
.wyc-shot figcaption { font-size: 13px; line-height: 1.45; color: var(--wy-text-muted); margin-top: 14px; max-width: 42ch; }

/* ---- Metrics: one row of figures, divided by thin rules ---- */
.wyc-metrics { padding: 0 var(--wy-gutter) 104px; }
.wyc-metrics .wyc-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid rgba(15, 2, 45, 0.14); }
.wyc-metric { padding: 28px 28px 0 0; }
.wyc-metric + .wyc-metric { padding-left: 28px; border-left: 1px solid rgba(15, 2, 45, 0.14); }
.wyc-metric-value { font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -0.035em; font-weight: 500; color: var(--wy-color-indigo); }
.wyc-metric--long .wyc-metric-value { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.02em; }
/* long words in translations ("Mehrsprachig") break instead of overflowing on phones */
.wyc-metric-value, .wyc-metric-label { overflow-wrap: anywhere; hyphens: auto; }
.wyc-metric-label { font-size: 15px; line-height: 1.4; color: var(--wy-text-muted); margin: 12px 0 0; }

/* ---- Article: heading column + text column ---- */
.wyc-body { padding: 0 var(--wy-gutter); }
.wyc-body .wyc-wrap { display: flex; flex-direction: column; gap: 72px; }
.wyc-block { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px 56px; align-items: start; }
.wyc-block > h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; margin: 0; padding-top: 3px; color: var(--wy-text); }
.wyc-block > p { font-size: 19px; line-height: 1.65; margin: 0; max-width: 64ch; color: var(--wy-text); }
.wyc-block > .wyc-col { grid-column: 2; min-width: 0; }

.wyc-obstacles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.wyc-obstacles li { padding: 18px 0 20px; border-top: 1px solid rgba(15, 2, 45, 0.14); }
.wyc-obstacles h3 { font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 6px; }
.wyc-obstacles p { font-size: 15px; line-height: 1.55; color: var(--wy-text-muted); margin: 0; }

.wyc-figure { margin: 0; }
.wyc-figure img { display: block; max-width: 100%; height: auto; border-radius: 4px; background: #fff; }
.wyc-figure figcaption { font-size: 13px; line-height: 1.45; color: var(--wy-text-muted); margin-top: 12px; }

/* ---- Antes / Depois: one process, two numbered lists ---- */
.wyc-compare { margin: 0; }
.wyc-compare-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.wyc-compare h3 { font-size: 18px; line-height: 1.3; font-weight: 500; margin: 0 0 4px; }
.wyc-compare ol { list-style: none; margin: 0; padding: 0; }
.wyc-compare li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-top: 1px solid rgba(15, 2, 45, 0.14); }
.wyc-compare li p { margin: 0; }
.wyc-cmp-num { font-family: var(--wy-font-mono); font-size: 13px; line-height: 1.6; color: var(--wy-color-violet-700); }
.wyc-cmp-who { font-size: 13px; line-height: 1.5; color: var(--wy-text-muted); }
.wyc-cmp-what { font-size: 16px; line-height: 1.5; color: var(--wy-text); }
.wyc-compare li.wyc-ai .wyc-cmp-who { color: var(--wy-color-indigo); font-weight: 500; }
.wyc-compare li.wyc-ai .wyc-step-tag { vertical-align: 0; }
.wyc-compare figcaption { font-size: 13px; line-height: 1.45; color: var(--wy-text-muted); margin-top: 16px; }

/* ---- Pipeline: the one dark band; each step reads in order ---- */
.wyc-pipeline { padding: 72px var(--wy-gutter); }
.wyc-band { --wy-text: var(--wy-color-off-white); --wy-text-muted: var(--wy-color-lavender-100); --wy-line: rgba(225, 210, 255, 0.28); --wy-line-strong: rgba(225, 210, 255, 0.5); }
.wyc-band { max-width: 1240px; margin: 0 auto; background: var(--wy-color-indigo); border-radius: 4px; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 70px); color: var(--wy-color-off-white); }
.wyc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 24px; }
.wyc-step { position: relative; padding-top: 28px; border-top: 1px solid rgba(225, 210, 255, 0.22); }
.wyc-step::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--wy-color-lavender-300); }
.wyc-step-num { display: block; font-family: var(--wy-font-mono); font-size: 13px; color: var(--wy-color-lavender-300); margin-bottom: 10px; }
.wyc-step h3 { font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--wy-color-off-white); }
.wyc-step p { font-size: 14px; line-height: 1.55; color: var(--wy-color-lavender-100); margin: 0; }
.wyc-step--ai { border-top: 2px solid var(--wy-color-lime); }
.wyc-step--ai::before { background: var(--wy-color-lime); top: -6px; width: 10px; height: 10px; }
.wyc-step--ai .wyc-step-num { color: var(--wy-color-lime); }
.wyc-step-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: var(--wy-color-lime); color: var(--wy-color-indigo); font-family: var(--wy-font-body); font-size: 11px; font-weight: 500; line-height: 1.5; vertical-align: 1px; }
.wyc-quote { font-size: clamp(20px, 2.3vw, 27px); line-height: 1.4; letter-spacing: -0.015em; font-weight: 500; max-width: 34em; margin: 64px 0 0; color: var(--wy-color-off-white); }

/* ---- Related: next cases + service/industry links ---- */
.wyc-related { padding: 104px var(--wy-gutter) 64px; }
.wyc-related h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; margin: 0 0 8px; }
.wyc-related .wyc-industry p, .wyc-related > .wyc-wrap > p { font-size: 15px; line-height: 1.5; color: var(--wy-text-muted); margin: 0; }
.wyc-related .wyc-wrap > p a { color: var(--wy-color-violet-700); text-decoration: underline; text-underline-offset: 3px; }
.wyc-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 32px; }
.wyc-next a { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: start; color: var(--wy-text); }
.wyc-next img { display: block; width: 132px; height: 100px; object-fit: cover; border-radius: 10px; }
.wyc-next-client { font-size: 13px; color: var(--wy-text-muted); margin: 2px 0 6px; }
.wyc-next h3 { font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.wyc-next a:hover h3, .wyc-links a:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.wyc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 48px; }
.wyc-links a { display: block; padding: 18px 0; border-top: 1px solid rgba(15, 2, 45, 0.14); color: var(--wy-text); }
.wyc-links span { display: block; font-size: 13px; color: var(--wy-text-muted); margin-bottom: 4px; }
.wyc-links h3 { font-size: 19px; line-height: 1.35; font-weight: 500; margin: 0; }
.wyc-next a:focus-visible, .wyc-links a:focus-visible, .wyc-facts a:focus-visible { outline: 2px solid var(--wy-color-violet-700); outline-offset: 4px; border-radius: 4px; }

/* ---- Tablet / phone ---- */
@media (max-width: 960px) {
  .wyc-hero .wyc-wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .wyc-shot { justify-self: start; }
  .wyc-block { grid-template-columns: minmax(0, 1fr); }
  .wyc-block > .wyc-col { grid-column: 1; }
  .wyc-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .wyc-step { padding: 0 0 28px 28px; border-top: 0; border-left: 1px solid rgba(225, 210, 255, 0.22); }
  .wyc-step:last-child { padding-bottom: 0; }
  .wyc-step::before { top: 0; left: -5px; }
  .wyc-step--ai { border-top: 0; border-left: 2px solid var(--wy-color-lime); }
  .wyc-step--ai::before { left: -6px; }
}
@media (max-width: 760px) {
  .wyc-hero { padding: 56px var(--wy-gutter) 56px; }
  .wyc-metrics { padding-bottom: 72px; }
  .wyc-metrics .wyc-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wyc-metric, .wyc-metric + .wyc-metric { padding: 24px 16px 24px 0; border-left: 0; }
  .wyc-metric:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(15, 2, 45, 0.14); }
  .wyc-metric:nth-child(n+3) { border-top: 1px solid rgba(15, 2, 45, 0.14); }
  .wyc-body .wyc-wrap { gap: 56px; }
  .wyc-block > p { font-size: 17px; }
  .wyc-obstacles, .wyc-next, .wyc-links, .wyc-compare-cols { grid-template-columns: minmax(0, 1fr); }
  .wyc-compare-cols > div + div { margin-top: 32px; }
  .wyc-pipeline { padding: 56px var(--wy-gutter); }
  .wyc-related { padding-top: 72px; }
  .wyc-next a { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .wyc-next img { width: 96px; height: 76px; }
}