/* Site shell in the v5 "Pep" language (docs/palette.md): fonts, tokens, ticker, floating pill header, mega menu, drawer,
   footer, lead form, notices. Flat colour, ink outlines, pills, hard offset shadows; no glows, no glass.
   Page bodies are styled by sp.css / home*.css / solution.css inside div.mcv-sp. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  /* Pep palette */
  --pink: #FF678B; --pink-deep: #E8446C; --pink-soft: #FFD3DD; --pink-ink: #C2284F;
  --yellow: #FFF48D; --yellow-deep: #FFE24A; --yellow-soft: #FFFBD6;
  --peach: #FFB08C; --magenta: #FD74FD; --mint: #7CF2B0; --orange: #FF9A4D;
  --ink: #141414; --ink-2: #1D1C1C; --ink-3: #2A2827; --ink-soft: #55504A;
  --paper: #FFFFFF; --cream: #FFFDF0; --line: rgba(20, 20, 20, .14);
  --wash: linear-gradient(115deg, #FF678B 0%, #FFB08C 42%, #FFF48D 100%);
  --wash-soft: linear-gradient(115deg, #FFD3DD 0%, #FFE9D6 45%, #FFFBD6 100%);
  --outline: 2px solid var(--ink);
  --shadow-pop: 6px 6px 0 var(--ink);
  --r-pill: 60px; --r-card: 28px; --r-lg: 40px;
  --ok: #1FA463;
  /* Legacy names kept so older rules keep working */
  --crimson: var(--pink); --crimson-dk: var(--pink-ink); --gold: var(--yellow); --hot: var(--pink); --rose: var(--pink-soft); --grad: var(--wash); --grad-d: var(--yellow);
  --wine: var(--ink-2); --blood: var(--ink-3); --blush: var(--yellow-soft); --stone: #F7F2E1;
  --btn: var(--ink); /* legacy buttons carry white text, so they resolve to ink */
  --text: var(--ink); --text-2: #3A3632; --muted: var(--ink-soft);
  --d-text: #FFFFFF; --d-text-2: #DAD5CA; --d-line: rgba(255, 255, 255, .2);
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --head-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--ink) var(--cream); }
body { margin: 0; background: var(--cream); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Focus: a white gap then an ink ring; ink surfaces switch to yellow (see .on-ink below). */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; border-radius: 8px; }
.top-strip :focus-visible, .site-foot :focus-visible, div.mcv-sp .cta :focus-visible, .hm-state :focus-visible { outline-color: var(--yellow); box-shadow: 0 0 0 3px var(--ink); }
::selection { background: var(--pink); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--yellow); color: var(--ink); border: var(--outline); padding: .6rem 1rem; border-radius: var(--r-pill); font-weight: 800; }
.skip:focus { top: 1rem; }
.ico { flex: none; }
.shell-wrap, .site-head .wrap, .site-foot .wrap, .top-strip .wrap { width: min(100% - 48px, 1360px); margin-inline: auto; }

/* ---------- Buttons used by the shell: yellow pill, ink outline, circular ink arrow badge ---------- */
.site-head .btn, .site-foot .btn, .mega .btn { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; padding: .4rem 1.25rem; border-radius: var(--r-pill); background: var(--yellow); color: var(--ink); border: var(--outline); font-weight: 800; font-size: .9375rem; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .2s; }
.site-head .btn:active, .site-foot .btn:active, .mega .btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); transition-duration: .1s; }
.site-head .btn:has(.ico), .site-foot .btn:has(.ico), .mega .btn:has(.ico) { padding-right: .3rem; }
.site-head .btn .ico, .site-foot .btn .ico, .mega .btn .ico { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--yellow); stroke-width: 2.5; transition: transform .35s var(--ease); }
/* The svg is the badge; its arrow is drawn small inside it so it can leave on one side and return on the other. */
.site-head .btn .ico path, .site-foot .btn .ico path, .mega .btn .ico path { transform-box: view-box; transform-origin: 50% 50%; transform: scale(.54); }
.site-head .btn:hover .ico path, .site-foot .btn:hover .ico path, .mega .btn:hover .ico path { animation: btn-arr .55s var(--ease-in-out, ease-in-out); }
@keyframes btn-arr { 45% { transform: translateX(22px) scale(.54); } 46% { transform: translateX(-22px) scale(.54); } }
.site-head .btn:hover, .site-foot .btn:hover, .mega .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); background: var(--yellow-deep); }
.site-foot .btn:hover { box-shadow: 4px 4px 0 var(--pink); }
.site-head .btn:hover .ico, .site-foot .btn:hover .ico, .mega .btn:hover .ico { transform: scale(1.08); }
.site-head .btn--line { background: var(--paper); }
.site-head .btn--line:hover { background: var(--pink-soft); }

/* ---------- Ticker strip: ink with yellow type ---------- */
.top-strip { position: relative; display: flex; height: 38px; background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 700; overflow: hidden; }
.top-strip ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.top-strip__run { flex: 1; min-width: 0; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.top-strip__run ul { flex: none; animation: strip-run 46s linear infinite; }
.top-strip__run:hover ul { animation-play-state: paused; }
.top-strip__run li { display: flex; align-items: center; gap: 1.6rem; padding-left: 1.6rem; }
.top-strip__run li::after { content: ""; width: .7rem; height: .7rem; background: var(--pink); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.top-strip .top-strip__links { flex: none; gap: 1.5rem; padding-inline: 1.5rem; background: var(--yellow); font-weight: 700; color: var(--ink); }
.top-strip__links li { display: flex; align-items: center; gap: .5rem; }
.top-strip__links i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(20, 20, 20, .2); }
.top-strip a { color: inherit; text-decoration: none; }
.top-strip a:hover { text-decoration: underline; text-underline-offset: 3px; }
@keyframes strip-run { to { transform: translateX(-100%); } }

/* ---------- Header: a floating white pill with an ink outline. .site-head stays the sticky element (sp.js docks the section nav under it). ---------- */
.site-head { --bw: min(100vw - 32px, 1360px); --shift: 0px; position: sticky; top: 0; z-index: 60; padding-block: 10px; background: none; pointer-events: none; }
.site-head__bar, .mega { pointer-events: auto; }
/* Landing page: the pill floats over the hero and over every section after it. */
.home .site-head { margin-bottom: calc(-1 * (var(--head-h) + 20px)); }
.site-head .wrap { width: min(100% - 32px, 1360px); }
.site-head__bar { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; height: var(--head-h); gap: 1.5rem; padding: 0 9px 0 26px; border-radius: 999px; color: var(--ink); transition: transform .55s var(--ease-out-expo, var(--ease)); }
/* Hidden while scrolling down (main.js). The shown state must stay transform:none: any transform here would trap the fixed mobile drawer. */
.site-head.is-hidden .site-head__bar { transform: translateY(calc(-100% - 64px)); transition-duration: .4s; transition-timing-function: var(--ease-in-out, ease-in-out); }
/* The pill lives on a pseudo-element so it can shrink on scroll without moving the content. */
.site-head__bar::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--paper); border: var(--outline); transition: transform .6s var(--ease-out-expo, var(--ease)), box-shadow .3s; }
/* Condensed after the first scroll: the pill pulls in and takes the hard shadow; logo, links and buttons follow it (transforms only). */
.site-head.is-condensed .site-head__bar::before { transform: scaleX(calc(1 - var(--tight, 0))); box-shadow: 4px 4px 0 var(--ink); }
.logo, .site-nav__ctas { transition: transform .6s var(--ease-out-expo, var(--ease)); }
.logo { transform: translateX(var(--shift)); }
.site-nav__ctas { transform: translateX(calc(var(--shift) * -1)); }
/* Sliding indicator: follows hover and focus, rests under the current page (main.js sets --x and --s). */
.nav-ink { position: absolute; left: 0; bottom: 12px; z-index: -1; width: 100px; height: 3px; border-radius: 3px; background: var(--pink-deep); transform-origin: 0 50%; transform: translateX(var(--x, 0px)) scaleX(var(--s, 0)); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-out-expo, var(--ease)), opacity .25s; }
.nav-ink.is-on { opacity: 1; }
.logo { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.04em; text-decoration: none; color: var(--ink); line-height: 1; display: inline-flex; align-items: center; }
.logo em { font-style: normal; margin-left: .06em; padding: .08em .3em .12em; border-radius: 999px; background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.logo i { width: .95rem; height: .95rem; margin-left: .3rem; background: var(--pink-deep); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.site-nav { display: flex; align-items: center; gap: 1.25rem; flex: 1; justify-content: space-between; }
.site-nav > ul { display: flex; align-items: center; gap: .1rem; margin: 0 0 0 1rem; padding: 0; list-style: none; }
.site-nav > ul > li > a, .mega-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .95rem; border: 0; background: none; border-radius: 999px; font-weight: 700; font-size: .9375rem; text-decoration: none; cursor: pointer; color: var(--ink); transform: translateX(var(--shift)); transition: background-color .2s, box-shadow .2s, transform .6s var(--ease-out-expo, var(--ease)); }
.site-nav > ul > li > a:hover, .mega-toggle:hover, .mega-toggle[aria-expanded="true"] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.site-nav > ul > li > a[aria-current], .mega-toggle.is-current { background: var(--pink-soft); box-shadow: inset 0 0 0 2px var(--ink); }
.mega-toggle[aria-expanded="true"] { background: var(--yellow); }
.site-nav > ul > li > a:active, .mega-toggle:active { background: var(--yellow-deep); }
.mega-toggle svg { transition: transform .25s var(--ease); }
.mega-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__ctas { display: flex; gap: .5rem; }
.nav-toggle { display: none; }

/* ---------- Mega menu: three group tabs, the platforms of the active group, a live preview of the one pointed at ---------- */
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: flex; flex-direction: column; max-height: var(--mega-room, calc(100vh - var(--head-h) - 150px)); border: var(--outline); border-radius: var(--r-lg); background: var(--cream); color: var(--ink); box-shadow: 8px 8px 0 var(--ink); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.985); transform-origin: 50% 0; transition: opacity .16s, transform .16s, visibility 0s .16s; }
.mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; } /* bridges the gap so the pointer can cross it */
.has-mega.is-open .mega, .no-js .has-mega:hover .mega, .no-js .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--ease-out-expo, var(--ease)), visibility 0s; }
.mega__body { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) minmax(0, 21.5rem); grid-template-rows: repeat(3, auto) 1fr; gap: 10px 22px; flex: 1 1 auto; min-height: 0; padding: 22px 22px 18px; overflow-y: auto; overscroll-behavior: contain; clip-path: inset(0 0 100% 0); transition: clip-path .16s; }
.has-mega.is-open .mega__body, .no-js .has-mega:hover .mega__body, .no-js .has-mega:focus-within .mega__body { clip-path: inset(0); transition: clip-path .45s var(--ease-out-expo, var(--ease)); }
.mega__group { display: contents; }
.mega__tl { position: absolute; width: 0; height: 0; overflow: hidden; }
.mega button { font: inherit; }

/* Group tabs */
.mt { grid-column: 1; display: flex; align-items: center; gap: .85rem; width: 100%; padding: .85rem .9rem; border: 2px solid transparent; border-radius: 26px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: transform .25s var(--ease-out-expo, var(--ease)), box-shadow .25s var(--ease-out-expo, var(--ease)), background-color .2s; }
.mt:hover { background: var(--yellow-soft); }
.mt.is-active { background: var(--yellow); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.mt__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background-color .25s; }
.mt.is-active .mt__ic { background: var(--pink); }
.mt__t { flex: 1; min-width: 0; }
.mt__t b { display: block; font: 800 1rem/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.mt__t small { display: block; white-space: nowrap; margin-top: .35rem; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.mt__t i { font: 700 12.5px var(--mono); font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); }
.mt__chev { flex: none; display: none; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .35s var(--ease-out-expo, var(--ease)); }
.mt.is-active .mt__chev { display: block; opacity: 1; transform: none; }

/* Platforms of a group */
.mega__panel { grid-column: 2; grid-row: 1 / -1; min-width: 0; container-type: inline-size; }
.js .mega__panel:not(.is-active) { display: none; }
.mega__lead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .3rem .2rem 14px; }
.mega__lead p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.mega__lead a { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .5rem .45rem .85rem; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.mega__lead a:hover { background: var(--yellow); }
.mega__lead .ico { width: 18px; height: 18px; transition: transform .3s var(--ease-out-expo, var(--ease)); }
.mega__lead a:hover .ico { transform: translateX(3px); }
.mega__list { display: grid; gap: 10px; align-items: start; margin: 0; padding: 0; list-style: none; }
@container (min-width: 520px) { .mega__list { grid-template-columns: 1fr 1fr; } }
@container (max-width: 519px) { .mega__lead p { display: none; } .mega__lead { justify-content: flex-end; padding-bottom: 8px; } }
.mp { border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); transition: transform .25s var(--ease-out-expo, var(--ease)), box-shadow .25s var(--ease-out-expo, var(--ease)), background-color .2s; }
.mp.is-on { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.mp__main { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 60px; padding: .7rem .9rem .7rem 1.05rem; border-radius: 20px; color: var(--ink); text-decoration: none; }
.mp__t b { display: block; font: 800 1rem/1.15 var(--display); letter-spacing: -.01em; }
.mp__t small { display: block; margin-top: .25rem; font-size: 12.5px; line-height: 1.3; font-weight: 500; color: var(--ink-soft); }
.mp__price { flex: none; padding: .4rem .65rem; border-radius: 999px; background: var(--ink); color: var(--yellow); font: 700 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.mp__alias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0 .9rem .85rem 1.05rem; font-size: 12.5px; }
.mp__alias span { margin-right: .1rem; color: var(--ink-soft); }
.mp__alias a { padding: .22rem .65rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.mp__alias a:hover { background: var(--pink-soft); }
.mega :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); }
.mp__main:focus-visible { outline-offset: -5px; box-shadow: none; }
.mt:focus-visible { border-radius: 26px; }
.mega__lead a:focus-visible, .mp__alias a:focus-visible, .mv__subs a:focus-visible, .mega__foot a:focus-visible { border-radius: 999px; }

/* Live preview, tinted with the solution's own brand colour (--t) */
.mega__preview { grid-column: 3; grid-row: 1 / -1; display: grid; position: sticky; top: 0; align-self: start; min-width: 0; }
.mv { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 27rem; padding: 18px 18px 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 28px; background: var(--yellow-soft); background: color-mix(in srgb, var(--t) 24%, #fff); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-out-expo, var(--ease)), visibility 0s .25s; }
.mv.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.mv__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mv__head h3 { margin: 0; font: 800 1.5rem/1.05 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.mv__price { flex: none; padding: .45rem .7rem; border-radius: 999px; background: var(--ink); color: var(--yellow); font: 700 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.mv__tag { margin: .55rem 0 0; max-width: 34ch; font-size: 14px; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.mv__stage { position: relative; flex: 1 1 0; min-height: 11rem; display: grid; justify-items: center; align-items: start; margin-top: 12px; overflow: hidden; }
.mv__stage::before { content: ""; position: absolute; left: 50%; top: 26px; width: min(78%, 15rem); aspect-ratio: 1; translate: -50% 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--t); }
.mv__img { position: relative; width: min(56%, 10.5rem); height: auto; margin-top: 20px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .5s var(--ease-out-expo, var(--ease)); }
.mv.is-on .mv__img.is-loaded { opacity: 1; transform: none; transition-delay: .05s; }
.mv__foot { display: grid; gap: 12px; margin-inline: -18px; padding: 14px 18px 16px; border-top: 2px solid var(--ink); background: var(--paper); }
.mv__subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mv__subs a { display: inline-block; padding: .32rem .7rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow-soft); font-size: 12.5px; font-weight: 700; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.mv__subs a:hover { background: var(--yellow); }
.mv__foot .btn { width: 100%; justify-content: space-between; }

/* Footer row */
.mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 12px 14px 12px 22px; border-top: 2px solid var(--ink); border-radius: 0 0 calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px); background: var(--yellow-soft); }
.mega__foot ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mega__foot li a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem 0 .8rem; border-radius: 999px; font-weight: 700; font-size: .9375rem; color: var(--ink); text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.mega__foot li a:hover { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }

/* Open: panels, tabs and cards rise in a light stagger; tab switches replay it on the new panel */
.has-mega.is-open .mt, .has-mega.is-open .mega__panel.is-active .mega__lead, .has-mega.is-open .mega__panel.is-active .mp { animation: mega-rise .55s var(--ease-out-expo, var(--ease)) backwards; animation-delay: calc(var(--i, 0) * 40ms + 70ms); }
.mega__group:nth-child(2) .mt { --i: 1; } .mega__group:nth-child(3) .mt { --i: 2; }
.mp:nth-child(2) { --i: 1; } .mp:nth-child(3) { --i: 2; } .mp:nth-child(4) { --i: 3; } .mp:nth-child(5) { --i: 4; } .mp:nth-child(6) { --i: 5; } .mp:nth-child(7) { --i: 6; } .mp:nth-child(8) { --i: 7; }
@keyframes mega-rise { from { opacity: 0; transform: translateY(12px); } }

/* No JavaScript: the panel opens on hover and focus, all three groups sit side by side, nothing is dead */
.no-js .mega__body { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
.no-js .mega__group { display: block; }
.no-js .mt { pointer-events: none; background: none; box-shadow: none; transform: none; border-color: transparent; }
.no-js .mt__chev, .no-js .mt.is-active .mt__chev, .no-js .mega__preview { display: none; }
.no-js .mega__panel { grid-column: auto; grid-row: auto; }
.no-js .mega__list { grid-template-columns: 1fr; }

.site-foot__line em { font-style: normal; color: var(--yellow); }

/* ---------- Closing call to action and lead form (inside div.mcv-sp): an ink band, a white outlined card ---------- */
div.mcv-sp .cta { position: relative; isolation: isolate; padding-block: 110px; color: var(--d-text); background: var(--ink); }
div.mcv-sp .cta__grid { max-width: 1360px; margin-inline: auto; padding-inline: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
div.mcv-sp .cta .sec-num { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--yellow); }
div.mcv-sp .cta .sec-num span { display: none; }
div.mcv-sp .cta .sec-num::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--pink); }
div.mcv-sp .cta h2 { margin-top: 18px; font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; color: #fff; }
div.mcv-sp .cta .mark { font-style: normal; background: none; color: var(--yellow); }
div.mcv-sp .cta__copy > p:not(.sec-num) { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--d-text-2); max-width: 46ch; }
div.mcv-sp .cta__alt { margin-top: 32px; display: grid; gap: 10px; }
div.mcv-sp .cta__alt a { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--r-pill); border: 2px solid #fff; background: transparent; color: #fff; font-weight: 700; transition: background-color .2s, color .2s, transform .25s var(--ease), box-shadow .25s var(--ease); }
div.mcv-sp .cta__alt a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--pink); }
div.mcv-sp .cta__alt .ico { color: var(--mint); }
div.mcv-sp .cta__alt a:hover .ico { color: var(--ink); }
div.mcv-sp .lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: clamp(22px, 2.6vw, 36px); background: var(--paper); color: var(--ink); border: var(--outline); border-radius: var(--r-card); box-shadow: 8px 8px 0 var(--yellow); }
div.mcv-sp .lead label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
div.mcv-sp .lead small { font-weight: 500; color: var(--ink-soft); }
div.mcv-sp .lead input, div.mcv-sp .lead select, div.mcv-sp .lead textarea { width: 100%; padding: 13px 16px; background: var(--cream); border: 2px solid var(--ink); border-radius: 16px; font-size: 16px; font-weight: 500; color: var(--ink); transition: box-shadow .2s, background-color .2s; }
div.mcv-sp .lead input:focus, div.mcv-sp .lead select:focus, div.mcv-sp .lead textarea:focus { outline: 0; background: #fff; box-shadow: 4px 4px 0 var(--pink); }
div.mcv-sp .lead textarea { resize: vertical; }
div.mcv-sp .lead__wide, div.mcv-sp .lead__fine, div.mcv-sp .lead__note, div.mcv-sp .lead .btn { grid-column: 1 / -1; }
div.mcv-sp .lead .btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border: var(--outline); border-radius: var(--r-pill); background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 16px; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s; }
div.mcv-sp .lead .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); background: var(--yellow-deep); }
div.mcv-sp .lead .btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
div.mcv-sp .lead__fine { font-size: 12.5px; color: var(--ink-soft); }
div.mcv-sp .lead__fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
div.mcv-sp .lead__trap { position: absolute; left: -9999px; }
div.mcv-sp .lead__note { padding: 14px 16px; border-radius: 16px; border: 2px solid var(--ink); font-weight: 700; }
div.mcv-sp .lead__note--ok { background: var(--mint); color: var(--ink); }
div.mcv-sp .lead__note--err { background: var(--pink-soft); color: var(--ink); }

/* ---------- Trademark notice (base styles): cream with outlined cards ---------- */
div.mcv-sp .disclaimer { padding-block: 40px; background: var(--cream); border-top: var(--outline); font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
div.mcv-sp .disclaimer .wrap { max-width: 1360px; margin-inline: auto; padding-inline: 40px; }
div.mcv-sp .disclaimer__lead { color: var(--ink); font-weight: 800; margin-bottom: 18px; }
div.mcv-sp .disclaimer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
div.mcv-sp .disclaimer__cols > * { padding: 22px 24px; background: var(--paper); border: var(--outline); border-radius: var(--r-card); }
div.mcv-sp .disclaimer b { color: var(--ink); }
div.mcv-sp .disclaimer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer: ink, white type, yellow and pink accents, outlined pills ---------- */
.site-foot { position: relative; isolation: isolate; overflow: clip; color: var(--d-text); padding-block: 96px 28px; background: var(--ink); box-shadow: inset 0 4px 0 var(--yellow); }
/* When the page closes on the lead-form band, the footer rises over it with rounded shoulders. */
main:has(div.mcv-sp > .cta:last-child) + .site-foot { margin-top: -44px; border-radius: 44px 44px 0 0; }
.site-foot ul { margin: 0; padding: 0; list-style: none; }
.site-foot p { margin: 0; }
.site-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; padding-bottom: 3.5rem; border-bottom: 2px solid var(--d-line); }
.site-foot__line { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height: 1; letter-spacing: -.04em; }
.site-foot__act { display: grid; gap: 1.1rem; justify-items: start; }
.site-foot__act .btn { min-height: 58px; padding-left: 1.6rem; font-size: 1.05rem; }
.site-foot__act .btn .ico { width: 44px; height: 44px; }
.site-foot__act ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.site-foot__act li { padding: .35rem .85rem; border-radius: var(--r-pill); border: 2px solid #fff; font-size: 13px; font-weight: 700; color: #fff; }
.site-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; padding-block: 3.5rem; }
.site-foot h2 { margin: 0 0 1rem; font-family: var(--display); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--yellow); }
.site-foot h2 a { color: inherit; text-decoration: none; }
.site-foot h2 a:hover { color: var(--pink); }
.site-foot ul + h2 { margin-top: 2rem; }
.site-foot__cols li a { display: inline-block; padding: .28rem 0; font-size: 15px; text-decoration: none; color: var(--d-text-2); transition: color .2s, transform .25s var(--ease); }
.site-foot__cols li a:hover { color: var(--yellow); transform: translateX(4px); }
.site-foot__tm { font-size: 12.5px; line-height: 1.65; color: var(--d-text-2); max-width: 82em; padding-block: 1.5rem; border-top: 2px solid var(--d-line); }
.site-foot__ghost { font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 21vw, 21rem); line-height: .8; letter-spacing: -.05em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px var(--pink); margin-block: 1rem -.06em !important; user-select: none; pointer-events: none; }
.site-foot__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 2px solid var(--d-line); font-size: 14px; color: var(--d-text-2); }
.site-foot__base ul { display: flex; gap: 1.5rem; }
.site-foot__base a { color: inherit; text-decoration: none; }
.site-foot__base a:hover { color: var(--yellow); }

/* ---------- Responsive ---------- */
@media (min-width: 1100px) { .site-head.is-condensed { --tight: .06; --shift: calc(var(--bw) * .03); } }
@media (min-width: 1360px) { .site-head.is-condensed { --tight: .14; --shift: calc(var(--bw) * .07); } }
@media (max-width: 1180px) {
  .mega__body { grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr) minmax(0, 19rem); gap: 10px 16px; padding: 18px; }
  .mt { padding-inline: .7rem; gap: .7rem; }
  .mt__ic { width: 40px; height: 40px; }
  .site-nav__ctas .btn--line { display: none; }
  .top-strip__links li:first-child { display: none; }
}
@media (max-width: 960px) {
  :root { --head-h: 58px; }
  .top-strip .top-strip__links { display: none; }
  .site-head__bar { padding: 0 8px 0 20px; }
  .logo { font-size: 1.4rem; }
  .nav-toggle { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; background: var(--yellow); border: var(--outline); border-radius: 50%; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); }
  .nav-toggle:active { transform: scale(.92); }
  .nav-toggle[aria-expanded="true"] { background: var(--ink); }
  .nav-toggle span:not(.sr) { width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .45s var(--ease-out-expo, var(--ease)), background-color .2s; }
  .nav-toggle[aria-expanded="true"] span:not(.sr) { background: #fff; }
  .nav-ink { display: none; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  /* Full-screen drawer on the wash, painted behind the pill's logo and toggle. */
  .site-nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 124px 24px 2rem; background: var(--wash); overflow-y: auto; overscroll-behavior: contain; clip-path: circle(0px at var(--ox, calc(100% - 46px)) var(--oy, 39px)); visibility: hidden; pointer-events: auto; transition: clip-path .45s var(--ease-in-out, ease-in-out), visibility 0s .45s; }
  /* Opens as a circle growing out of the toggle (main.js sets --ox/--oy), then the links rise in sequence. */
  .site-nav.is-open { clip-path: circle(150vmax at var(--ox, calc(100% - 46px)) var(--oy, 39px)); visibility: visible; transition: clip-path .9s var(--ease-out-expo, var(--ease)), visibility 0s; }
  .site-nav.is-open > ul > li, .site-nav.is-open .site-nav__ctas { animation: drawer-in .7s var(--ease-out-expo, var(--ease)) backwards; }
  .site-nav.is-open > ul > li:nth-child(1) { animation-delay: 90ms; }
  .site-nav.is-open > ul > li:nth-child(2) { animation-delay: 140ms; }
  .site-nav.is-open > ul > li:nth-child(3) { animation-delay: 190ms; }
  .site-nav.is-open > ul > li:nth-child(4) { animation-delay: 240ms; }
  .site-nav.is-open > ul > li:nth-child(5) { animation-delay: 290ms; }
  .site-nav.is-open .site-nav__ctas { animation-delay: 360ms; }
  .site-nav > ul > li > a, .mega-toggle, .logo, .site-nav__ctas { transform: none; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .site-nav > ul > li { border-bottom: 2px solid var(--ink); }
  .site-nav > ul > li > a, .mega-toggle { width: 100%; justify-content: space-between; padding: .9rem 0; border-radius: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 9.5vw, 2.8rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
  .site-nav > ul > li > a:hover, .mega-toggle:hover, .mega-toggle[aria-expanded="true"], .site-nav > ul > li > a[aria-current], .mega-toggle.is-current { background: none; box-shadow: none; }
  .site-nav > ul > li > a[aria-current]::after, .mega-toggle.is-current::after { content: ""; flex: none; width: .5em; height: .5em; margin-left: auto; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
  .site-nav__ctas { margin-top: 1.5rem; flex-direction: column; }
  .site-nav__ctas .btn { justify-content: space-between; min-height: 54px; }
  .site-nav__ctas .btn--line { display: inline-flex; justify-content: center; }
  /* Mega menu inside the drawer: groups become accordions */
  .mega { position: static; display: none; max-height: none; margin: 0 0 1.25rem; border-radius: 28px; background: var(--paper); box-shadow: 6px 6px 0 var(--ink); opacity: 1; visibility: visible; transform: none; }
  .mega::before { display: none; }
  .has-mega.is-open .mega { display: flex; }
  .mega__body, .no-js .mega__body { display: block; padding: 6px; overflow: visible; clip-path: none; }
  .mega__group, .no-js .mega__group { display: block; }
  .mega__group + .mega__group { border-top: 2px solid var(--ink); }
  .mt, .no-js .mt { min-height: 68px; padding: .75rem .8rem; border-radius: 22px; }
  .mt:hover { background: none; }
  .mt.is-active { border-color: transparent; box-shadow: none; transform: none; }
  .mt__chev, .mt.is-active .mt__chev { display: block; opacity: 1; transform: none; transition: transform .35s var(--ease-out-expo, var(--ease)); }
  .mt.is-active .mt__chev { transform: rotate(90deg); }
  .mega__panel { padding: 4px 4px 12px; }
  .mega__lead { padding: 0 .4rem 10px; }
  .mega__lead p { display: none; }
  .mega__lead a { min-height: 48px; padding-left: .5rem; font-size: 15px; }
  .mega__list { gap: 8px; }
  .mp__main { min-height: 56px; }
  .mp__alias { gap: 8px; padding-bottom: 12px; }
  .mp__alias a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem; font-size: 14px; }
  .mega__preview { display: none; }
  .mega__foot { padding: 6px; border-radius: 0 0 24px 24px; }
  .mega__foot-x, .mega .mega__demo { display: none; }
  .mega__foot li a { min-height: 52px; }
  .mega__foot ul { width: 100%; }
  .mega__foot li { flex: 1; }
  .mega__foot li a { width: 100%; }
  div.mcv-sp .cta { padding-block: 72px; }
  div.mcv-sp .cta__grid { grid-template-columns: 1fr; padding-inline: 20px; }
  div.mcv-sp .disclaimer .wrap { padding-inline: 20px; }
  div.mcv-sp .disclaimer__cols { grid-template-columns: 1fr; gap: 14px; }
  .site-foot { padding-top: 64px; }
  .site-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
}
@media (max-width: 560px) {
  div.mcv-sp .lead { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-head *, .site-foot *, .mega * { transition-duration: .01ms !important; animation: none !important; }
  .top-strip__run ul { animation: none; }
  .site-head__bar, .site-head__bar::before, .logo, .site-nav, .site-nav__ctas, .nav-ink { transition-duration: .01ms !important; }
  .site-nav.is-open > ul > li, .site-nav.is-open .site-nav__ctas, .btn:hover .ico path { animation: none !important; }
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(26px); } }

/* Mega menu: the lead platforms sit at the head of the footer row. */
.mega__foot { flex-wrap: wrap; }
.mega__lead-row { flex: 1 1 100%; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.mega__foot .mega__lead-l { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .4rem 0 .8rem; font-size: .8125rem; font-weight: 800; color: var(--ink-soft); }
.mega__foot .mega__lead-row a { gap: .6rem; border: 2px solid var(--ink); background: var(--yellow); padding: 0 1rem; }
.mega__foot .mega__lead-row a:hover { background: var(--pink); }
.mega__foot .mega__lead-row a span { font: 700 .8125rem/1 var(--mono); }