/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/e27f657e38d52887baa3.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/75b3bedbebc35f347c0a.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/d67e4a94ba498635f764.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/16e1d48b6dd29eb240ae.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/745994b5cd950ec201b6.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/5f3d6ad60f29d6cb7084.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/e27f657e38d52887baa3.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/75b3bedbebc35f347c0a.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/d67e4a94ba498635f764.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/16e1d48b6dd29eb240ae.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/745994b5cd950ec201b6.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/5f3d6ad60f29d6cb7084.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/942b71451b22e42c9a0d.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/a7f3e73668ccdd99ac9c.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/009e52d835e45840b76a.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/b6a22966401b2b8892ec.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/07df696d36deed379a90.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/8bc9dee39deab5dc6599.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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/site/assets/redesign/fonts/dd8a4575be9806105ac3.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;
}


/* ==========================================================================
   Welo website v5. Structure and rhythm modelled on sanalabs.com.
   Pure white page, black type, light H1 (400) and medium H2 (500),
   16px body, thin 16px line icons, 24px media radius, pill buttons.
   Media are slots: drop an <img> or <video> inside any .slot.
   Blue #0285FF is the only accent.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --text: #0a0a0a;
  --muted: rgba(10, 10, 10, .52);
  --faint: rgba(10, 10, 10, .32);
  --line: #e8e8ea;
  --line-soft: #f0f0f2;
  --soft: #f4f4f5;          /* cards, panels */
  --soft-2: #ececee;        /* slots */
  --btn: #0a0a0a;
  --blue: #0285ff;
  --blue-soft: rgba(2, 133, 255, .12);
  --navy: #1f1b7a;          /* Pennywise, the demo business */

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-h1: clamp(46px, 5.6vw, 84px);
  --fs-h2: clamp(34px, 3.2vw, 48px);
  --fs-h3: clamp(24px, 2.1vw, 32px);

  --r-media: 24px;
  --r-card: 24px;
  --gutter: clamp(16px, 2.7vw, 40px);
  --max: 1600px;
  --sec: clamp(72px, 8vw, 128px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.4; letter-spacing: -.011em; font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blue-soft); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.sec { padding-block: var(--sec); }
.sec-t0 { padding-top: 0; }
.sec-b0 { padding-bottom: 0; }

/* ---------- Type ---------- */
.h1 { font-size: var(--fs-h1); font-weight: 400; line-height: .98; letter-spacing: -.042em; color: var(--ink); text-wrap: balance; }
.h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.02; letter-spacing: -.034em; color: var(--ink); text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.12; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.p { font-size: 16px; line-height: 1.42; color: var(--text); text-wrap: pretty; }
.p-l { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.42; color: var(--text); text-wrap: pretty; }
.muted { color: var(--muted); }
.eyebrow { font-size: 16px; font-weight: 500; color: var(--blue); }
.strong { font-weight: 500; color: var(--ink); }
.mono { font-family: var(--mono); letter-spacing: -.01em; }
em.n { font-style: normal; }
.tnum { font-variant-numeric: tabular-nums; }

/* Centered section head */
.head { display: grid; justify-items: center; text-align: center; gap: 16px; max-width: 760px; margin: 0 auto clamp(40px, 4.4vw, 64px); }
.head .p { max-width: 440px; }
.head .actions { margin-top: 8px; }
/* Split head: title left, text right (Sana Learn subpages) */
.shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; align-items: start; margin-bottom: clamp(40px, 4.4vw, 64px); }
.shead > .h2 { grid-column: 1 / span 6; max-width: 15ch; }
.shead > .side { grid-column: 9 / -1; display: grid; gap: 20px; justify-items: start; max-width: 460px; padding-top: 6px; }
@media (max-width: 860px) { .shead > .h2, .shead > .side { grid-column: 1 / -1; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 1px 18px 0; border-radius: 999px; background: var(--btn); color: #fff; font-size: 16px; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; transition: background-color .25s ease, color .25s ease, transform .2s ease; }
.btn:hover { background: #2b2b2e; }
.btn:active { transform: scale(.98); }
.btn-blue { background: var(--blue); }
.btn-blue:hover { background: #0072dc; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #f1f1f2; }
.btn-soft { background: rgba(10, 10, 10, .06); color: var(--ink); }
.btn-soft:hover { background: rgba(10, 10, 10, .1); }
.btn-sm { height: 34px; padding: 1px 14px 0; font-size: 14px; }
.btn .icon { width: 14px; height: 14px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.actions.start { justify-content: flex-start; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
.nav { display: flex; align-items: center; gap: 40px; height: 56px; font-size: 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 19px; font-weight: 500; letter-spacing: -.045em; }
.brand svg { width: 22px; height: 22px; fill: var(--ink); }
.nav-l, .nav-r { display: flex; align-items: center; gap: 4px; }
.nav-l a, .nav-r a:not(.btn) { padding: 8px 12px; border-radius: 6px; color: var(--ink); transition: background-color .2s ease; }
.nav-l a:hover, .nav-r a:not(.btn):hover, .nav-l a[aria-current="page"] { background: rgba(10, 10, 10, .04); }
.nav-r { margin-left: auto; }
.nav-r .btn { margin-left: 8px; }
.menu-btn { display: none; width: 38px; height: 38px; border-radius: 999px; align-items: center; justify-content: center; background: rgba(10, 10, 10, .05); }
.menu-btn .icon { width: 18px; height: 18px; }
.mobile-menu { position: fixed; inset: 0; z-index: 70; background: #fff; padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; flex-direction: column; gap: 24px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a { font-size: 30px; font-weight: 400; letter-spacing: -.04em; padding-block: 8px; }
.mobile-menu .btn { margin-top: auto; height: 50px; }
@media (max-width: 960px) { .nav-l { display: none; } }
@media (max-width: 640px) { .nav-r a:not(.btn) { display: none; } .nav-r .btn { display: none; } .menu-btn { display: inline-flex; } .nav-r { gap: 8px; } }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-d="1"] { transition-delay: .08s; }
.js .reveal[data-d="2"] { transition-delay: .16s; }
.js .reveal[data-d="3"] { transition-delay: .24s; }

/* ---------- Slots: empty media placeholders, ready for a photo or video ---------- */
.slot { position: absolute; inset: 0; background: linear-gradient(180deg, #f2f2f3, #e9e9eb); overflow: hidden; }
.slot > img, .slot > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot::after { content: attr(data-label); position: absolute; right: 16px; bottom: 14px; padding: 5px 9px; border-radius: 7px; background: rgba(255, 255, 255, .72); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(10, 10, 10, .42); pointer-events: none; }
.slot:has(> img)::after, .slot:has(> video)::after, .slot[data-label=""]::after { display: none; }
.slot.sky { background: linear-gradient(180deg, #1f6fd1 0%, #3d92ea 38%, #8cc0f2 72%, #d6e8fa 100%); }
.slot.sky::after { background: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .8); top: 16px; bottom: auto; }
.slot.ink { background: linear-gradient(180deg, #17171a, #2a2a2f); }
.slot.ink::after { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); }

/* Media panels */
.media { position: relative; overflow: hidden; border-radius: var(--r-media); isolation: isolate; background: var(--soft-2); }
.media > .slot { z-index: -1; }
.ar-hero { aspect-ratio: 16 / 7.4; }
.ar-wide { aspect-ratio: 16 / 9; }
.ar-43 { aspect-ratio: 4 / 3; }
.ar-11 { aspect-ratio: 1 / 1; }
.ar-45 { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .ar-hero { aspect-ratio: 4 / 5; } .ar-wide { aspect-ratio: 4 / 3.4; } }
.bleed { position: relative; overflow: hidden; isolation: isolate; }
.bleed > .slot { z-index: -1; }

/* Fixed-size compositions scaled to their box (JS) */
.fit { position: relative; width: 100%; }
.fit > .fit-inner { position: absolute; left: 50%; top: 0; transform-origin: top center; transform: translateX(-50%) scale(var(--s, 1)); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: clamp(64px, 7.5vw, 112px); padding-bottom: clamp(36px, 3vw, 48px); }
.hero-head { display: grid; justify-items: center; text-align: center; gap: 20px; }
.hero-head .p { max-width: 400px; }
.hero-head .actions { margin-top: 6px; }
.hero-media { margin-top: clamp(40px, 4vw, 56px); }

/* Rotating first line of the H1 */
.rot { display: grid; justify-items: center; }
.rot > span { grid-area: 1 / 1; opacity: 0; filter: blur(8px); transform: translateY(10px); transition: opacity .6s ease, filter .7s ease, transform .8s var(--ease); white-space: nowrap; }
.rot > span.is-on { opacity: 1; filter: none; transform: none; }
.rot > span.is-out { opacity: 0; filter: blur(8px); transform: translateY(-10px); }
@media (max-width: 520px) { .rot > span { white-space: normal; } }

/* Logos */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 24px; padding-block: clamp(32px, 3.4vw, 48px); }
.logos img { height: calc(var(--h, 30px) * 1); width: auto; max-width: 100%; filter: grayscale(1) brightness(.2); opacity: .95; }
@media (max-width: 760px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .logos img { height: calc(var(--h, 30px) * .8); } }

/* Feature row: icon, title, line (optionally tabs) */
.feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; max-width: 920px; margin-inline: auto; text-align: center; }
.feat { display: grid; justify-items: center; gap: 2px; font-size: 14px; line-height: 1.4; transition: opacity .35s ease; }
.feat .icon { width: 16px; height: 16px; margin-bottom: 10px; }
.feat b { font-weight: 500; }
.feat span { font-weight: 450; }
.feats.as-tabs .feat { opacity: .36; cursor: pointer; }
.feats.as-tabs .feat:hover { opacity: .7; }
.feats.as-tabs .feat.is-on { opacity: 1; }
.feat .bar { width: 40px; height: 2px; border-radius: 2px; margin-top: 12px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.feat .bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); }
.feats.as-tabs .feat.is-on .bar { opacity: 1; }
@media (max-width: 760px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hero media overlays */
.mo { position: absolute; z-index: 2; }
.mo-br { right: 4%; bottom: 0; width: min(460px, 62%); }
.mo-c { left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 86%); }
.mo-cm { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 86%); }
@media (max-width: 760px) { .mo-br { right: 50%; transform: translateX(50%); width: 88%; } }

/* Panes: stacked content that crossfades with the active tab */
.panes { display: grid; }
.panes > [data-i] { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s ease, transform .7s var(--ease), visibility 0s linear .5s; }
.panes > [data-i].is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .05s, transform .7s var(--ease) .05s; }
.panes.fade > [data-i] { transform: none; }

/* ==========================================================================
   Pill tabs over full-bleed media (Sana product page)
   ========================================================================== */
.ptabs-sec { position: relative; color: #fff; padding-top: clamp(48px, 5vw, 72px); }
.ptabs-sec > .slot { z-index: -1; }
.ptabs { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; padding-inline: 16px; }
.ptab { position: relative; overflow: hidden; height: 40px; padding: 1px 16px 0; border-radius: 999px; font-size: 16px; color: #fff; transition: color .3s ease, background-color .3s ease; isolation: isolate; }
.ptab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity .3s ease; }
.ptab:hover { background: rgba(255, 255, 255, .14); }
.ptab.is-on { color: var(--ink); background: rgba(255, 255, 255, .62); }
.ptab.is-on::before { opacity: 1; }
.pause { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); display: inline-grid; place-items: center; flex: none; }
.pause .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.pause .i-play { display: none; }
.is-paused .pause .i-pause { display: none; }
.is-paused .pause .i-play { display: block; }
.ptabs-title { margin-top: clamp(28px, 3vw, 40px); text-align: center; }
.ptabs-title .h2 { color: #fff; max-width: 17ch; margin-inline: auto; }
.window-stage { margin-top: clamp(36px, 4vw, 56px); padding-inline: var(--gutter); }
.window-stage .fit { max-width: 1180px; margin-inline: auto; }

/* Light version of the pills (white sections) */
.ptabs.light .ptab { color: var(--ink); opacity: .5; }
.ptabs.light .ptab:hover { opacity: .8; background: rgba(10, 10, 10, .04); }
.ptabs.light .ptab.is-on { opacity: 1; background: rgba(10, 10, 10, .06); }
.ptabs.light .ptab::before { background: rgba(10, 10, 10, .08); }
.ptabs.light .pause { background: rgba(10, 10, 10, .06); }

/* Browser window */
.win { width: 1180px; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 0 0 1px rgba(10, 10, 10, .06), 0 40px 80px -40px rgba(10, 10, 10, .45); overflow: hidden; }
.win.round { border-radius: 16px; }
.win-bar { height: 40px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); }
.win-bar .dots { display: flex; gap: 7px; }
.win-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.win-bar .dots i:nth-child(2) { background: #febc2e; }
.win-bar .dots i:nth-child(3) { background: #28c840; }
.win-bar .addr { flex: 1; max-width: 340px; margin-inline: auto; height: 24px; border-radius: 7px; background: #f4f4f5; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); }
.win-bar .addr .icon { width: 11px; height: 11px; stroke-width: 2; }
.win-bar .sp { width: 50px; }
.win-body { position: relative; height: 560px; overflow: hidden; }
.win-body > .panes { height: 100%; }
.win-body > .panes > [data-i] { height: 100%; }

/* ==========================================================================
   Stats row
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat { padding: 0 24px; border-left: 1px solid var(--line); display: grid; align-content: start; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat small { font-size: 14px; font-weight: 500; color: var(--ink); }
.stat b { margin: 30px 0 10px; font-size: var(--fs-h2); font-weight: 500; line-height: 1; letter-spacing: -.034em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 16px; color: var(--ink); max-width: 18ch; }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; } .stat:nth-child(4) { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: 0 16px; } .stat:nth-child(odd) { border-left: 0; padding-left: 0; } .stat:nth-child(4) { border-left: 1px solid var(--line); padding-left: 16px; } }

/* ==========================================================================
   Carousels with a pager pill
   ========================================================================== */
.car { position: relative; }
.track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; flex: none; }
.pager-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 32px; }
.pager { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(10, 10, 10, .05); }
.pager button { width: 6px; height: 6px; border-radius: 999px; background: rgba(10, 10, 10, .2); position: relative; overflow: hidden; transition: width .45s var(--ease), background-color .3s ease; }
.pager button.is-on { width: 64px; background: rgba(10, 10, 10, .14); }
.pager button i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; }
.pager button.is-on i { opacity: 1; }
.pager-row .pause { width: 32px; height: 32px; background: rgba(10, 10, 10, .05); }
.pager-row .pause .icon { width: 12px; height: 12px; }

/* Tall cards (testimonial style) */
.tcard { position: relative; width: calc((100% - 3 * 20px) / 4); min-width: 290px; height: clamp(400px, 30vw, 440px); border-radius: var(--r-card); overflow: hidden; isolation: isolate; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.tcard > .slot { z-index: -1; }
.tcard q, .tcard .q { quotes: "\201C" "\201D"; font-size: 16px; line-height: 1.38; max-width: 30ch; }
.tcard .q-l { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -.03em; font-weight: 500; max-width: 14ch; }
.tcard .who { display: grid; gap: 2px; font-size: 16px; }
.tcard .who small { font-size: 16px; color: var(--muted); }
.tcard.on-dark { color: #fff; }
.tcard.on-dark .who small { color: rgba(255, 255, 255, .62); }
.tcard .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards-3 .tcard { width: auto; min-width: 0; }
@media (max-width: 900px) { .cards-3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .cards-3::-webkit-scrollbar { display: none; } .cards-3 .tcard { flex: none; width: 82%; scroll-snap-align: center; } }

/* Captioned cards (Sana Learn horizontal carousels) */
.ccard { width: clamp(300px, 38vw, 572px); display: grid; gap: 16px; }
.ccard:nth-child(3n+2) { width: clamp(280px, 30vw, 452px); }
.ccard .media { height: clamp(380px, 35vw, 528px); }
.ccard p { font-size: 16px; max-width: 46ch; }
.ccard p b { font-weight: 500; }

/* ==========================================================================
   Arrow tabs: media left, big text list right (Sana "Every team")
   ========================================================================== */
.atabs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; align-items: stretch; }
.atabs > .media { grid-column: 1 / span 6; min-height: clamp(460px, 44vw, 640px); }
.atabs > .a-side { grid-column: 8 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-block: 8px; }
.a-list { display: grid; gap: 2px; margin-top: 18px; }
.a-tab { display: flex; align-items: baseline; gap: 10px; text-align: left; font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.032em; line-height: 1.12; color: rgba(10, 10, 10, .26); transition: color .35s ease; }
.a-tab:hover { color: rgba(10, 10, 10, .5); }
.a-tab .arr { display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width .45s var(--ease), opacity .3s ease; }
.a-tab.is-on { color: var(--ink); }
.a-tab.is-on .arr { width: 1.05em; opacity: 1; }
.a-foot { display: grid; gap: 18px; justify-items: start; max-width: 470px; }
@media (max-width: 900px) { .atabs > .media, .atabs > .a-side { grid-column: 1 / -1; } .atabs > .media { min-height: 0; aspect-ratio: 4 / 4.4; } .a-side { order: -1; } }

/* Glass card that floats on a media slot */
.glass { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-radius: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 24px 50px -30px rgba(10, 10, 10, .35); }
.glass.dark { background: rgba(20, 20, 22, .55); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.check-card { width: 400px; padding: 20px 22px 8px; }
.check-card h5 { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.check-card h5 .icon { width: 15px; height: 15px; color: var(--ink); }
.check-card .q { font-size: 20px; font-weight: 500; letter-spacing: -.025em; margin-bottom: 8px; }

/* Check list (ticks draw in when the pane is active) */
.checks li { display: flex; align-items: center; gap: 12px; padding-block: 11px; border-top: 1px solid rgba(10, 10, 10, .07); font-size: 15px; }
.checks .tick { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .25s ease; }
.checks .tick .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.go .checks .tick, .checks.static .tick { transform: none; opacity: 1; }
.go .checks li:nth-child(2) .tick { transition-delay: .12s; }
.go .checks li:nth-child(3) .tick { transition-delay: .24s; }
.go .checks li:nth-child(4) .tick { transition-delay: .36s; }
.go .checks li:nth-child(5) .tick { transition-delay: .48s; }

/* ==========================================================================
   Media + check-card grid (Sana partnership)
   ========================================================================== */
.cgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.cgrid > .media { grid-column: 1 / span 6; min-height: 480px; }
.cgrid > .cells { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cell { min-height: 112px; border-radius: var(--r-card); background: var(--soft); padding: 22px 22px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; font-size: 16px; }
.cell .ck { width: 18px; height: 18px; border-radius: 50%; background: rgba(10, 10, 10, .32); color: #fff; display: grid; place-items: center; }
.cell .ck .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.cell .num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cell small { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; }
.cell.cta { background: var(--btn); color: #fff; justify-content: flex-end; transition: background-color .25s ease; }
.cell.cta:hover { background: #2b2b2e; }
.cell.cta span { display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 900px) { .cgrid > .media, .cgrid > .cells { grid-column: 1 / -1; } .cgrid > .media { min-height: 0; aspect-ratio: 4 / 3; } }
@media (max-width: 480px) { .cgrid > .cells { gap: 10px; } .cell { min-height: 100px; padding: 18px; border-radius: 18px; } }

/* ==========================================================================
   Info panels (Sana integrations / security)
   ========================================================================== */
.ipanel { border-radius: var(--r-card); background: var(--soft); padding: clamp(24px, 2.4vw, 32px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; }
.ipanel + .ipanel { margin-top: 20px; }
.ipanel .ip-l { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ipanel .ip-l b { font-size: 16px; font-weight: 500; }
.ipanel .ip-l p { margin-top: 8px; color: var(--muted); max-width: 34ch; }
.ip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.ip-item { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 450; min-height: 40px; }
.ip-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(10, 10, 10, .04); font-family: var(--mono); font-size: 11px; color: var(--ink); }
.ip-ic .icon { width: 16px; height: 16px; }
.ip-ic.pct { font-size: 11.5px; }
@media (max-width: 900px) { .ipanel { grid-template-columns: minmax(0, 1fr); } .ip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ip-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Comparison table
   ========================================================================== */
.ctable { display: grid; }
.ct-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: 32px; padding-block: 22px; border-top: 1px solid var(--line); }
.ct-row.ct-head { border-top: 0; padding-block: 0 22px; color: var(--muted); }
.ct-row.ct-head span:last-child { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.ct-row > b { font-weight: 500; }
.ct-row > span:nth-child(2) { color: var(--muted); }
.ct-row > span:nth-child(3) { color: var(--ink); }
.ct-row .seal { width: 16px; height: 16px; }
@media (max-width: 760px) { .ct-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; } .ct-row > b { grid-column: 1 / -1; } .ct-row.ct-head > :first-child { display: none; } }

/* ==========================================================================
   Vertical tabs (Sana Learn "Gorgeous user experience")
   ========================================================================== */
.vtabs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; }
.vtabs > .v-side { grid-column: 1 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.vtabs > .media { grid-column: 7 / -1; min-height: clamp(520px, 50vw, 760px); }
.v-head { display: grid; gap: 20px; max-width: 520px; }
.v-head .p { max-width: 400px; }
.v-list { display: grid; max-width: 380px; }
.v-tab { position: relative; text-align: left; padding: 16px 0 16px 26px; opacity: .36; transition: opacity .35s ease; }
.v-tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(10, 10, 10, .12); }
.v-tab::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: calc(var(--p, 0) * 100%); background: var(--ink); opacity: 0; }
.v-tab:hover { opacity: .7; }
.v-tab.is-on { opacity: 1; }
.v-tab.is-on::after { opacity: 1; }
.v-tab b { display: block; font-weight: 500; }
.v-tab span { display: block; margin-top: 2px; }
@media (max-width: 900px) { .vtabs > .v-side, .vtabs > .media { grid-column: 1 / -1; } .vtabs > .media { min-height: 0; aspect-ratio: 4 / 4.4; } }

/* ==========================================================================
   Pairs of captioned media (Sana Learn "Your AI learning analyst")
   ========================================================================== */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.trio { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: 20px; }
.cap { display: grid; gap: 14px; align-content: start; }
.cap .media { aspect-ratio: 4 / 3.1; }
.trio .cap .media { aspect-ratio: auto; height: clamp(360px, 34vw, 500px); }
.cap p { font-size: 16px; max-width: 52ch; }
.cap p b { font-weight: 500; display: block; }
@media (max-width: 860px) { .pair, .trio { grid-template-columns: minmax(0, 1fr); } .trio .cap .media { height: auto; aspect-ratio: 4 / 3.4; } }

/* Centered quote */
.cquote { display: grid; justify-items: center; text-align: center; gap: 28px; max-width: 760px; margin-inline: auto; }
.cquote .mark { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 600; letter-spacing: -.045em; }
.cquote .mark svg { width: 26px; height: 26px; fill: var(--ink); }
.cquote q, .cquote .q { quotes: "\201C" "\201D"; font-size: var(--fs-h3); font-weight: 500; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.cquote .by { display: grid; gap: 2px; font-size: 16px; }
.cquote .by b { font-weight: 500; }
.cquote .by span { color: var(--muted); }

/* Full-bleed media with copy in the top-left corner */
.fbt { position: relative; min-height: clamp(560px, 52vw, 820px); isolation: isolate; overflow: hidden; }
.fbt > .slot { z-index: -1; }
.fbt .fbt-copy { padding: clamp(28px, 3vw, 40px) var(--gutter); display: grid; gap: 18px; max-width: 560px; }
.fbt.on-dark { color: #fff; }
.fbt.on-dark .h2 { color: #fff; }
.fbt .mo { z-index: 2; }

/* Phones */
.phones { position: relative; width: 1000px; height: 660px; }
.phone { position: absolute; top: 40px; width: 300px; height: 620px; border-radius: 52px; background: #111; padding: 11px; box-shadow: inset 0 0 0 2px #2b2b2e, 0 50px 80px -50px rgba(10, 10, 10, .55); }
.phone::before { content: ""; position: absolute; left: 50%; top: 20px; width: 92px; height: 26px; border-radius: 20px; background: #000; transform: translateX(-50%); z-index: 3; }
.phone .scr { position: relative; height: 100%; border-radius: 42px; background: #fff; overflow: hidden; padding: 58px 18px 18px; display: grid; align-content: start; gap: 14px; font-size: 13px; }
.phone.p1 { left: 40px; transform: rotate(-7deg) translateY(36px); }
.phone.p2 { left: 350px; top: 0; z-index: 2; }
.phone.p3 { right: 40px; transform: rotate(7deg) translateY(36px); }
.phone.dark .scr { background: #0b0b0c; color: #fff; }
.ph-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); }
.ph-top b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 600; }
.ph-top b svg { width: 16px; height: 16px; fill: currentColor; }
.ph-title { font-size: 25px; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; display: flex; align-items: center; gap: 7px; }
.ph-title .seal { width: 20px; height: 20px; }
.ph-sub { color: var(--muted); font-size: 12px; margin-top: -8px; }
.ph-box { border-radius: 16px; background: #f5f5f6; padding: 12px 14px; }
.phone.dark .ph-box { background: #19191b; }
.ph-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid rgba(10, 10, 10, .06); font-size: 12.5px; }
.ph-row:first-child { border-top: 0; }
.ph-row em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11.5px; }
.ph-row em .icon { width: 12px; height: 12px; color: var(--blue); stroke-width: 2.4; }
.ph-score { display: flex; align-items: baseline; justify-content: space-between; }
.ph-score b { font-size: 30px; font-weight: 600; letter-spacing: -.04em; }
.ph-score b i { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 500; }
.ph-bar { height: 4px; border-radius: 4px; background: rgba(10, 10, 10, .08); overflow: hidden; margin-top: 8px; }
.ph-bar i { display: block; height: 100%; width: 92%; background: var(--blue); }
.ph-voice { margin-top: 30px; display: grid; justify-items: center; gap: 22px; text-align: center; }
.ph-voice .seal { width: 64px; height: 64px; }
.ph-voice p { font-size: 15px; line-height: 1.35; max-width: 20ch; color: rgba(255, 255, 255, .9); }
.ph-voice small { font-size: 11.5px; color: rgba(255, 255, 255, .5); }

/* ==========================================================================
   FAQ, CTA, footer, toast
   ========================================================================== */
.faq { max-width: 880px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 26px; height: 26px; flex: none; border-radius: 50%; background: rgba(10, 10, 10, .05); display: grid; place-items: center; transition: transform .4s var(--ease); }
.faq summary .pm .icon { width: 13px; height: 13px; stroke-width: 2; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .answer { padding: 0 0 24px; color: var(--muted); max-width: 64ch; }
.faq-foot { text-align: center; margin-top: 28px; }

.cta { display: grid; justify-items: center; text-align: center; gap: 14px; }
.cta small { font-size: 16px; font-weight: 500; }
.cta .h2 { max-width: 18ch; }
.cta .actions { margin-top: 12px; }

.site-footer { border-top: 1px solid var(--line); padding-top: 44px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.f-grid { display: grid; grid-template-columns: minmax(0, 6fr) repeat(4, minmax(0, 2fr)); gap: 32px; }
.f-mark svg { width: 34px; height: 34px; fill: var(--ink); }
.f-col h4 { font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.f-col ul { display: grid; gap: 10px; }
.f-col a { color: var(--muted); transition: color .2s ease; }
.f-col a:hover { color: var(--ink); }
.f-bottom { margin-top: 64px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: var(--muted); }
.f-bottom .links { display: flex; flex-wrap: wrap; gap: 18px; }
.f-bottom a:hover { color: var(--ink); }
.f-dis { margin-top: 20px; font-size: 12px; color: var(--faint); max-width: 110ch; line-height: 1.5; }
@media (max-width: 900px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-mark { grid-column: 1 / -1; } }

.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .5s var(--ease); display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .05), 0 14px 36px -14px rgba(10, 10, 10, .3); font-size: 15px; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast .btn { height: 32px; padding: 1px 13px 0; font-size: 14px; }
@media (max-width: 480px) { .toast { font-size: 14px; padding-left: 14px; } .toast .t-more { display: none; } }

/* ==========================================================================
   Real Welo components (identical to production)
   ========================================================================== */
.seal { width: 22px; height: 22px; flex: none; overflow: visible; --sf: #0285ff; --sc: #fff; }
.wb { position: absolute; left: 22px; bottom: 22px; z-index: 3; display: flex; align-items: center; width: 56px; height: 56px; overflow: hidden; border: 1px solid #dbdbdb; border-radius: 999px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .08); color: #141414; text-align: left; letter-spacing: normal; transition: width .56s var(--ease), box-shadow .2s ease, transform .18s ease; }
.wb.is-open { width: var(--pill-width, 300px); }
.wb.is-press { transform: scale(.97); }
.wb-logo { width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; }
.wb-logo svg { width: 28px; height: 28px; fill: #1b1b1b; }
.wb-text { min-width: 0; flex: 1; display: grid; gap: 3px; padding-right: 15px; opacity: 0; transform: translateX(-10px); transition: opacity .32s var(--ease), transform .32s var(--ease); }
.wb.is-open .wb-text { opacity: 1; transform: none; }
.wb-title { font-size: 16px; font-weight: 600; line-height: 1.22; white-space: nowrap; }
.wb-sub { font-size: 12px; color: #8a8a8a; line-height: 1.22; white-space: nowrap; transition: opacity .42s var(--ease), transform .42s var(--ease); }
.wb-sub.out { opacity: 0; transform: translateY(8px); }
.wb-sub.prein { opacity: 0; transform: translateY(-8px); transition: none; }
.wb-static { position: relative; left: auto; bottom: auto; }
.chips { display: grid; gap: 10px; justify-items: center; }
.chip-w { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; color: #141414; letter-spacing: normal; box-shadow: 0 0 0 1px rgba(17, 24, 39, .06), 0 8px 20px -12px rgba(17, 24, 39, .35); white-space: nowrap; }
.chip-w .ring { width: 14px; height: 14px; border-radius: 50%; background: #9bb31e; box-shadow: 0 0 0 4px rgba(155, 179, 30, .2); }
.chip-w svg.blob { width: 18px; height: 18px; fill: #141414; }
.chip-w .sep { width: 1px; height: 18px; background: #e3e3e3; }
.chip-w .stars svg { width: 13px; height: 13px; }
.stars { display: inline-flex; gap: 2px; color: #1b1b1b; }
.stars svg { width: 14px; height: 14px; fill: currentColor; }
.verified-by { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.verified-by .seal { width: 16px; height: 16px; }

.tag { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.dot-s { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.dot-s.active { background: var(--blue); }
.dot-s.review { box-shadow: inset 0 0 0 1.5px var(--ink); }
.dot-s.suspended { background: rgba(10, 10, 10, .3); }
.dot-s.revoked { background: var(--ink); }
.live .dot-s.active, .dot-s.live { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(2, 133, 255, .35); } 50% { box-shadow: 0 0 0 5px rgba(2, 133, 255, 0); } }

.cursor { position: absolute; z-index: 9; width: 26px; height: 26px; pointer-events: none; left: 0; top: 0; opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform 1.1s cubic-bezier(.45, 0, .2, 1), opacity .3s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22)); }
.cursor.is-on { opacity: 1; }
.cursor svg { width: 26px; height: 26px; transition: transform .15s ease; }
.cursor.is-click svg { transform: scale(.84); }

.pw-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 40px; }
.pw-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; letter-spacing: -.03em; color: var(--navy); }
.pw-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--navy); display: grid; place-items: center; flex: none; }
.pw-mark svg { width: 15px; height: 15px; fill: #fff; }
.pw-cta { height: 34px; padding: 0 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; }
.skel { display: grid; gap: 10px; }
.skel i { display: block; height: 10px; border-radius: 6px; background: #f1f1f3; }
.skel i:nth-child(1) { width: 58%; height: 22px; border-radius: 8px; background: #ececef; }
.skel i:nth-child(2) { width: 90%; }
.skel i:nth-child(3) { width: 76%; }

/* Welo Page card (modal) */
.mc { background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(10, 10, 10, .05), 0 30px 60px -32px rgba(10, 10, 10, .4); }
.mc-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.mc-top b { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; font-size: 13px; }
.mc-top b svg { width: 17px; height: 17px; fill: var(--ink); }
.mc-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 12px; }
.mc-head b { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.mc-head b .seal { width: 17px; height: 17px; }
.mc-head small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.mc-rows { padding: 0 20px; }
.mc-rows li { display: flex; justify-content: space-between; align-items: center; height: 40px; font-size: 13.5px; box-shadow: inset 0 1px 0 var(--line-soft); }
.mc-rows em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.mc-rows .icon { width: 14px; height: 14px; color: var(--blue); stroke-width: 2.2; }
.js .anim-rows li { opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .5s var(--ease); }
.go .anim-rows li, .anim-rows li.on { opacity: 1; transform: none; }
.go .anim-rows li:nth-child(2) { transition-delay: .12s; }
.go .anim-rows li:nth-child(3) { transition-delay: .24s; }
.go .anim-rows li:nth-child(4) { transition-delay: .36s; }
.go .anim-rows li:nth-child(5) { transition-delay: .48s; }
.mc-foot { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 20px 16px; box-shadow: inset 0 1px 0 var(--line-soft); }
.mc-foot span { font-size: 13px; color: var(--muted); }
.mc-foot b { font-size: 24px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mc-foot b i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); }

/* Hero demo: badge tapped, Welo Page card rises */
.demo { position: relative; width: 460px; height: 470px; }
.demo .wb { left: 0; bottom: 18px; }
.demo .mc { position: absolute; left: 30px; right: 0; bottom: 96px; opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom left; transition: opacity .5s ease, transform .6s var(--ease); }
.demo.open .mc { opacity: 1; transform: none; }

/* Website mock with badge and modal */
.site { position: relative; width: 1180px; height: 560px; background: #fff; }
.site-hero { padding: 40px 64px 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.site-hero .t { display: grid; gap: 14px; }
.site-hero .t b { font-size: 44px; font-weight: 600; letter-spacing: -.045em; line-height: 1.02; color: var(--navy); }
.site-hero .t > span:not(.pw-cta):not(.code-chip) { font-size: 15px; color: var(--muted); line-height: 1.5; }
.site-hero .t .pw-cta { justify-self: start; height: 38px; font-size: 13px; }
.site-art { height: 330px; border-radius: 18px; background: linear-gradient(160deg, #eef0ff, #e3e6fb 55%, #d9ddf7); position: relative; overflow: hidden; }
.site-art::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 30px; height: 150px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -24px rgba(31, 27, 122, .4); }
.site .wb { left: 28px; bottom: 28px; }
.veil { position: absolute; inset: 0; background: rgba(10, 10, 10, .16); opacity: 0; transition: opacity .45s ease; z-index: 5; }
.site.open .veil { opacity: 1; }
.site .mc { position: absolute; z-index: 6; left: 50%; top: 48px; width: 440px; transform: translate(-50%, 18px); opacity: 0; transition: opacity .45s ease, transform .6s var(--ease); }
.site.open .mc { opacity: 1; transform: translate(-50%, 0); }

/* Welo Page (full) */
.wpage { padding: 34px 56px; display: grid; gap: 22px; }
.wp-co { display: flex; align-items: center; justify-content: space-between; }
.wp-co > div { display: flex; align-items: center; gap: 16px; }
.wp-co .pw-mark { width: 58px; height: 58px; border-radius: 17px; }
.wp-co .pw-mark svg { width: 30px; height: 30px; }
.wp-co b { display: flex; align-items: center; gap: 8px; font-size: 28px; font-weight: 600; letter-spacing: -.04em; }
.wp-co b .seal { width: 22px; height: 22px; }
.wp-co small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.score { padding: 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-soft); }
.score .icon { width: 24px; height: 22px; color: #1b1b1b; }
.score small { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.score b { display: block; margin-top: 2px; font-size: 30px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.score b .of { font-size: 13px; color: var(--muted); font-weight: 500; }
.score .bar { height: 4px; border-radius: 4px; background: var(--line-soft); margin-top: 10px; overflow: hidden; }
.score .bar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 4px; transition: width 1.1s var(--ease) .1s; }
.go .score .bar i { width: var(--w); }
.wp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wp-two > div { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-soft); padding: 14px 18px 4px; }
.wp-two h5 { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.wp-two .checks li { font-size: 14px; padding-block: 10px; }
.wp-two .checks li:first-child { border-top: 0; }

/* Review cards */
.revs { padding: 40px 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-content: start; }
.revs-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.revs-head b { font-size: 28px; font-weight: 600; letter-spacing: -.04em; display: inline-flex; align-items: center; gap: 10px; }
.revs-head span { color: var(--muted); font-size: 14px; }
.rev { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-soft); padding: 18px; display: grid; gap: 9px; align-content: start; }
.rev .top { display: flex; justify-content: space-between; align-items: center; }
.rev b { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.rev p { font-size: 13.5px; color: #55555b; line-height: 1.5; }
.rev small { font-size: 12px; color: var(--muted); }
.rev .stars svg { width: 13px; height: 13px; }
.rev .verified-by { font-size: 12px; }
.rev .verified-by .seal { width: 14px; height: 14px; transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.rev .verified-by span { opacity: 0; transition: opacity .4s ease .15s; }
.go .rev .verified-by .seal { transform: none; }
.go .rev .verified-by span { opacity: 1; }
.go .rev:nth-of-type(3) .verified-by .seal { transition-delay: .2s; }
.go .rev:nth-of-type(4) .verified-by .seal { transition-delay: .4s; }
.media-row { display: flex; gap: 8px; }
.media-row span { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--soft); }
.media-row img { width: 100%; height: 100%; object-fit: cover; }

/* Updates timeline */
.upd { padding: 40px 56px; display: grid; gap: 20px; align-content: start; }
.upd-head b { font-size: 28px; font-weight: 600; letter-spacing: -.04em; }
.upd-head span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.upd ul { display: grid; }
.upd li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line-soft); font-size: 16px; }
.upd li small { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* Status panel */
.stat-ui { padding: 40px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; height: 100%; }
.stat-ui .big { display: grid; gap: 14px; justify-items: start; }
.stat-ui .big .seal { width: 72px; height: 72px; }
.stat-ui .big b { font-size: 34px; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.stat-ui .big span { color: var(--muted); }
.state-stack { display: grid; gap: 10px; justify-items: start; }
.state { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); transition: opacity .4s ease, transform .4s var(--ease); }
.state.dim { opacity: .32; }

/* Certificate */
.cert { width: 520px; border-radius: 12px; background: #fff; overflow: hidden; position: relative; box-shadow: 0 0 0 1px rgba(10, 10, 10, .06), 0 30px 70px -36px rgba(10, 10, 10, .4); }
.cert::before { content: ""; position: absolute; inset: 8px; border: 1px solid #efeff1; border-radius: 7px; pointer-events: none; }
.cert-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 32px 20px; border-bottom: 1px solid #efeff1; margin: 0 8px; }
.cert-head .brand { font-size: 17px; }
.cert-head .brand svg { width: 22px; height: 22px; }
.cert-head span { font-size: 12px; color: var(--muted); }
.cert-main { padding: 26px 32px 6px; display: grid; gap: 4px; }
.cert-main small { font-size: 12.5px; color: var(--muted); }
.cert-main h4 { display: flex; align-items: center; gap: 10px; font-size: 36px; font-weight: 500; letter-spacing: -.05em; line-height: 1.15; }
.cert-main h4 .seal { width: 28px; height: 28px; }
.cert-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; padding: 18px 32px 22px; }
.cert-fields dt { font-size: 11.5px; color: var(--muted); }
.cert-fields dd { font-family: var(--mono); font-size: 12.5px; margin-top: 3px; white-space: nowrap; }
.cert-fields dd .tag { height: 22px; font-family: var(--font); font-size: 11.5px; }
.cert-checks { margin: 0 32px; border-top: 1px solid #efeff1; }
.cert-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; font-size: 14px; border-bottom: 1px solid #efeff1; }
.cert-row .tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e4e4e7; color: #fff; transition: background-color .4s ease; }
.cert-row .tick .icon { width: 11px; height: 11px; stroke-width: 3; }
.cert-row .tick path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--ease) .1s; }
.cert-row em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--muted); transition: color .4s ease; }
.cert-row.on .tick { background: var(--blue); }
.cert-row.on .tick path { stroke-dashoffset: 0; }
.cert-row.on em { color: var(--ink); }
.cert-score { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px 12px; }
.cert-score small { font-size: 12.5px; color: var(--muted); }
.cert-score b { font-size: 34px; font-weight: 500; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.cert-score b .of { font-size: 16px; color: var(--muted); font-weight: 500; }
.cert-bar { height: 4px; border-radius: 4px; background: #efeff1; margin: 0 32px 30px; overflow: hidden; }
.cert-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--blue); transition: width 1.4s var(--ease); }
.cert-stamp { position: absolute; right: 26px; top: 96px; width: 94px; height: 94px; opacity: 0; transform: scale(1.3) rotate(-18deg); transition: opacity .4s ease, transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.cert-stamp.on { opacity: 1; transform: scale(1) rotate(-8deg); }
.cert-stamp > svg { width: 100%; height: 100%; }
.cert-stamp text { font-family: var(--font); font-size: 7.6px; font-weight: 600; letter-spacing: .14em; fill: var(--blue); }

/* Dashboard */
.dash { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 100%; }
.dash-side { border-right: 1px solid var(--line-soft); padding: 22px 16px; display: grid; align-content: start; gap: 2px; font-size: 13.5px; color: var(--muted); }
.dash-side b { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--ink); font-size: 14px; font-weight: 600; }
.dash-side b svg { width: 18px; height: 18px; fill: var(--ink); }
.dash-side span { padding: 7px 10px; border-radius: 8px; }
.dash-side span.on { background: #f4f4f5; color: var(--ink); font-weight: 500; }
.dash-main { padding: 28px 34px; display: grid; gap: 22px; align-content: start; }
.dash-top { display: flex; justify-content: space-between; align-items: center; }
.dash-top b { font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-soft); }
.kpi { padding: 16px 20px; }
.kpi + .kpi { border-left: 1px solid var(--line-soft); }
.kpi small { display: block; font-size: 12.5px; color: var(--muted); }
.kpi b { font-size: 28px; font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.chart { height: 220px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .ln { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.go .chart .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease); }
.chart .end, .chart .end-ring { fill: var(--blue); opacity: 0; }
.go .chart .end { opacity: 1; transition: opacity .3s ease 2s; }
.go .chart .end-ring { opacity: .18; transition: opacity .3s ease 2s; }
.ranges { display: flex; gap: 22px; font-family: var(--mono); font-size: 12.5px; color: rgba(10, 10, 10, .3); }
.ranges b { color: var(--ink); font-weight: 500; }

/* Code line */
.code-chip { justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 12px; background: #0f0f11; color: #e4e4e7; font-family: var(--mono); font-size: 13px; box-shadow: 0 20px 40px -24px rgba(10, 10, 10, .5); white-space: nowrap; }
.code-chip .k { color: #7cb8ff; }
.code-chip .s { color: #b5e08b; }

/* Search UI */
.search-ui { width: 520px; padding: 8px; }
.search-input { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; border-radius: 14px; background: #fff; font-size: 18px; letter-spacing: -.015em; box-shadow: 0 0 0 1px rgba(10, 10, 10, .04); }
.search-input .icon { width: 18px; height: 18px; color: var(--muted); }
.search-input .typed { white-space: nowrap; overflow: hidden; }
.search-input .caret { width: 1.5px; height: 22px; background: var(--ink); animation: blink 1s steps(1) infinite; margin-left: -10px; }
@keyframes blink { 50% { opacity: 0; } }
.search-results { min-height: 80px; padding-top: 8px; }
.result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #fff; font-size: 14px; }
.result .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.result .pw-mark { width: 38px; height: 38px; border-radius: 11px; }
.result .pw-mark svg { width: 19px; height: 19px; }
.result b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; letter-spacing: -.015em; }
.result b .seal { width: 15px; height: 15px; }
.result small { display: block; font-size: 12.5px; color: var(--muted); }
.result .q { width: 38px; height: 38px; border-radius: 11px; background: var(--soft); display: grid; place-items: center; color: var(--muted); flex: none; }
.result .q .icon { width: 18px; height: 18px; }
.js .result.anim { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s var(--ease); }
.js .result.anim.on { opacity: 1; transform: none; }

/* Standard pieces */
.mix { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; }
.mix i { display: block; height: 100%; flex: var(--g, 1) 1 0; min-width: 0; background: var(--c); transition: flex-grow 1.1s var(--ease); }
.fr { display: grid; }
.fr li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid rgba(10, 10, 10, .07); font-size: 14px; }
.fr li:first-child { border-top: 0; }
.fr .code { font-family: var(--mono); font-size: 12.5px; color: var(--blue); padding-top: 1px; }
.fr b { font-weight: 500; display: block; font-size: 15px; }
.fr small { color: var(--muted); font-size: 13px; }

/* Small UI card on media */
.ui-card { width: 420px; padding: 22px; display: grid; gap: 14px; }
.ui-card .row { display: flex; justify-content: space-between; align-items: center; }
.ui-card .ttl { font-size: 18px; font-weight: 500; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.ui-card .ttl .icon { width: 16px; height: 16px; }
.ui-card .rule { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.ui-card .rule span { height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); }
.ui-card .rule span i { font-style: normal; color: var(--muted); }
.ui-card .btns { display: flex; justify-content: flex-end; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid4 .cell { min-height: 150px; }
.grid4 .cell p { color: var(--muted); }
@media (max-width: 900px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid4 { grid-template-columns: minmax(0, 1fr); } }
.caption { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }
.seal-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.seal-stage .seal { width: 112px; height: 112px; filter: drop-shadow(0 24px 30px rgba(10, 10, 10, .18)); }

/* Windows inherit dark ink even inside white-text sections */
.win, .glass:not(.dark), .mc, .cert { color: var(--ink); }
.phones { height: 740px; }

/* URL bar, document list */
.urlbar { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .05), 0 20px 40px -24px rgba(10, 10, 10, .35); font-size: 16px; color: var(--muted); white-space: nowrap; }
.urlbar b { color: var(--ink); font-weight: 500; }
.urlbar .icon { width: 15px; height: 15px; color: var(--ink); stroke-width: 2; }
.doc-list { width: 400px; padding: 8px 18px; }
.doc { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(10, 10, 10, .07); }
.doc:first-child { border-top: 0; }
.doc .ic { width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.doc b { font-size: 14px; font-weight: 500; display: block; }
.doc small { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.doc .ok { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.doc .ok .icon { width: 13px; height: 13px; stroke-width: 2.4; color: var(--blue); }

/* Centered overlay stage inside a media */
.stage-c { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.stage-c > .fit { max-width: 100%; }
.stage-b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1000px, 84%); }
@media (max-width: 760px) { .stage-b { width: 94%; } }
.cap .q-over, .q-over { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }

/* v5 mobile fixes */
.stage-c > [data-i] { justify-self: stretch; align-self: center; width: 100%; min-width: 0; display: grid; justify-items: center; }
.stage-c > [data-i] > .fit { width: 100%; }
@media (max-width: 760px) {
  .fbt { min-height: 0; display: flex; flex-direction: column; background: #0a0a0a; }
  .fbt > .slot { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 4 / 4.6; z-index: 0; }
  .fbt .fbt-copy { order: 1; padding-top: 56px; padding-bottom: 36px; }
  .fbt .wb-photo { z-index: 2; }
}
@media (min-width: 761px) and (max-width: 1100px) { .ar-hero { aspect-ratio: 4 / 3; } }


/* ==========================================================================
   v6 (A pages). Scenes inside a browser window cut by the section edge,
   with no drop shadows. On phones the window becomes a phone frame and
   every scene reflows through container queries (container name: xw).
   ========================================================================== */

/* ---------- Motion used inside scenes ---------- */
@keyframes xin { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes xpop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes xgrow { from { width: 0; } to { width: var(--w); } }
@keyframes xfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xline { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes xdraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes xtickbg { from { background-color: #e4e4e7; } to { background-color: var(--blue); } }
@keyframes xink { from { color: var(--muted); } to { color: var(--ink); } }
@keyframes xstamp { from { opacity: 0; transform: scale(1.3) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes xring { from { transform: scale(.72); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
@keyframes xhl { 0% { opacity: 0; transform: scale(.94); } 25% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xtype { from { width: 0; } to { width: 40ch; } }
@keyframes xstar { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }

.xw-body [data-a], .xph [data-a] { opacity: 0; }
.go [data-a] { animation: xin .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 120ms); }

/* ---------- Window (desktop) ---------- */
.xstage { margin-top: clamp(36px, 4vw, 56px); padding-inline: var(--gutter); }
.xstage > .fit { max-width: 1180px; margin-inline: auto; overflow: hidden; }
.xw { --crop: 60; position: relative; width: 1180px; background: #fff; border-radius: 18px 18px 0 0; overflow: hidden; color: var(--ink); container: xw / inline-size; }
.xw-bar { position: relative; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--line-soft); }
.xw-dots { display: flex; gap: 7px; width: 60px; }
.xw-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e6e6e9; }
.xw-addr { flex: 1; max-width: 380px; margin-inline: auto; height: 28px; padding: 0 12px; border-radius: 9px; background: var(--soft); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.xw-addr .icon { width: 11px; height: 11px; stroke-width: 2; }
.xw-addr .panes > [data-i] { text-align: center; }
.xw-sp { width: 60px; }
.xw-status { display: none; width: 100%; justify-content: space-between; align-items: center; height: 24px; padding: 0 10px 0 14px; font-size: 14px; letter-spacing: -.01em; }
.xw-status b { font-weight: 600; }
.sb { display: flex; align-items: center; gap: 5px; }
.sb svg { fill: currentColor; display: block; }
.bat { position: relative; width: 24px; height: 12px; padding: 2px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .38); }
.bat i { display: block; width: 78%; height: 100%; border-radius: 2px; background: currentColor; }
.bat::after { content: ""; position: absolute; right: -3px; top: 4px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(10, 10, 10, .38); }
.xw-body { position: relative; height: 620px; overflow: hidden; }
.xw-body > .panes { height: 100%; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.xw-body > .panes > [data-i] { height: 100%; min-height: 0; overflow: hidden; }

/* ---------- Phone frame: .xph always, .xw on small screens ---------- */
.xph { --crop: 0; position: relative; width: 340px; background: #fff; border: 10px solid #0a0a0a; border-radius: 54px; overflow: hidden; color: var(--ink); container: xw / inline-size; }
.xph::before { content: ""; position: absolute; z-index: 9; top: 9px; left: 50%; width: 96px; height: 28px; border-radius: 20px; background: #0a0a0a; transform: translateX(-50%); }
.xph-bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px 10px; }
.xph .xw-status { display: flex; }
.xph .xw-addr { width: 100%; max-width: none; flex: none; height: 34px; border-radius: 12px; font-size: 12.5px; color: rgba(10, 10, 10, .62); }
.xph-body { position: relative; height: 720px; overflow: hidden; }
.xph-body > * { height: 100%; }

@media (max-width: 760px) {
  .xw { --crop: 170; width: 380px; border: 10px solid #0a0a0a; border-bottom: 0; border-radius: 56px 56px 0 0; }
  .xw::before { content: ""; position: absolute; z-index: 9; top: 9px; left: 50%; width: 96px; height: 28px; border-radius: 20px; background: #0a0a0a; transform: translateX(-50%); }
  .xw-bar { flex-direction: column; align-items: stretch; height: auto; gap: 8px; padding: 12px 14px 10px; border-bottom: 0; }
  .xw-dots, .xw-sp { display: none; }
  .xw-status { display: flex; }
  .xw-addr { width: 100%; max-width: none; flex: none; height: 36px; border-radius: 12px; font-size: 13px; color: rgba(10, 10, 10, .62); }
  .xw-body { height: 740px; }
}

/* ---------- Shared bits inside scenes ---------- */
.xt { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.xt .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.xw-body .xt, .xph .xt { opacity: 0; }
.go .xt { animation: xpop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--t, 0) * 110ms + 500ms); }
.xrows li:nth-child(2) { --t: 1; } .xrows li:nth-child(3) { --t: 2; } .xrows li:nth-child(4) { --t: 3; } .xrows li:nth-child(5) { --t: 4; } .xrows li:nth-child(6) { --t: 5; }
.xbar { height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.xbar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--blue); }
.go .xbar i { animation: xgrow 1.3s var(--ease) both; animation-delay: calc(var(--t, 0) * 90ms + 450ms); }
.xp-sc li:nth-child(2) { --t: 1; } .xp-sc li:nth-child(3) { --t: 2; } .xp-sc li:nth-child(4) { --t: 3; } .xp-sc li:nth-child(5) { --t: 4; } .xp-sc li:nth-child(6) { --t: 5; }
.xrows li { display: flex; align-items: center; gap: 12px; height: 46px; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.xrows li em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--muted); }
.xs-burger { display: none; margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); place-items: center; flex: none; }
.xs-burger .icon { width: 16px; height: 16px; }
.xp-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.xp-logo svg { width: 22px; height: 22px; fill: var(--ink); }

/* Stars: always five, empty ones light. They pop in left to right. */
.rate { display: inline-flex; gap: 2px; color: var(--ink); }
.rate svg { width: 15px; height: 15px; fill: currentColor; }
.rate svg.off { fill: rgba(10, 10, 10, .13); }
.go .rate svg { animation: xstar .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * 90ms + 260ms + var(--s, 0) * 70ms); }
.rate svg:nth-child(2) { --s: 1; } .rate svg:nth-child(3) { --s: 2; } .rate svg:nth-child(4) { --s: 3; } .rate svg:nth-child(5) { --s: 4; }
.vb { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; }
.vb .seal { width: 15px; height: 15px; }
.go .vb .seal { animation: xpop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * 90ms + 650ms); }

/* Cursor becomes a touch dot on phones */
@container xw (max-width: 600px) {
  .cursor { filter: none; }
  .cursor svg { display: none; }
  .cursor::after { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(10, 10, 10, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); transform: translate(-30%, -30%); transition: transform .15s ease, background-color .15s ease; }
  .cursor.is-click::after { transform: translate(-30%, -30%) scale(.78); background: rgba(10, 10, 10, .28); }
}

/* ---------- Scene: Pennywise website with the Welo Badge ---------- */
.xs { position: relative; height: 100%; background: #fff; overflow: hidden; }
.xs-nav { display: flex; align-items: center; gap: 28px; padding: 22px 40px; }
.xs-links { display: flex; gap: 26px; margin-left: 20px; font-size: 14px; color: #5f5f75; }
.xs-end { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14px; color: #5f5f75; }
.xs-nav .pw-cta { height: 36px; padding: 0 16px; font-size: 13px; }
.xs-hero { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 46px 40px 0; }
.xs-h { font-size: 60px; font-weight: 600; letter-spacing: -.055em; line-height: 1; color: var(--navy); }
.xs-p { font-size: 17px; line-height: 1.45; color: #6b6b80; max-width: 40ch; }
.xs-btns { display: flex; gap: 10px; margin-top: 6px; }
.xs-btns > span { height: 42px; padding: 0 20px; font-size: 14px; }
.xs-ghost { border-radius: 999px; background: #f0f0f7; color: var(--navy); font-weight: 500; display: inline-flex; align-items: center; }
.xs-art { margin: 44px auto 0; width: 820px; height: 440px; padding-top: 34px; border-radius: 28px; background: linear-gradient(180deg, #f1f1f8, #e8e8f4); display: grid; justify-items: center; align-content: start; }
.xs-card { width: 440px; padding: 22px; border-radius: 20px; background: #fff; display: grid; gap: 18px; box-shadow: 0 0 0 1px rgba(31, 27, 122, .05); }
.xs-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.xs-card-top small { display: block; font-size: 13px; color: #8a8aa0; }
.xs-card-top b { font-size: 34px; font-weight: 600; letter-spacing: -.045em; color: var(--navy); font-variant-numeric: tabular-nums; }
.xs-card-top b i { font-style: normal; color: #a8a8c4; }
.xs-pill { height: 28px; padding: 0 12px; border-radius: 999px; background: #f2f2f8; font-size: 12.5px; font-weight: 500; color: var(--navy); display: inline-flex; align-items: center; }
.xs-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.xs-acts span { height: 40px; border-radius: 12px; background: #f3f3f9; display: grid; place-items: center; font-size: 13.5px; font-weight: 500; color: var(--navy); }
.xs-acts span:first-child { background: var(--navy); color: #fff; }
.xs-tx li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #f0f0f5; font-size: 14px; }
.xs-tx i { width: 34px; height: 34px; border-radius: 50%; background: #f1f1f8; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; color: var(--navy); }
.xs-tx small { display: block; font-size: 12px; color: #9a9ab0; }
.xs-tx em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.xs .wb { left: 28px; bottom: calc(var(--crop) * 1px + 28px); }
.xs .veil { background: rgba(246, 246, 248, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.xs.open .veil { opacity: 1; }

/* Welo Page panel that opens from the badge */
.xsheet { position: absolute; z-index: 6; right: 24px; top: 24px; width: 400px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .08); opacity: 0; transform: translateX(22px); transition: opacity .45s ease, transform .75s var(--ease); }
.xs.open .xsheet { opacity: 1; transform: none; }
.xsheet-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.xsheet-top b { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
.xsheet-top b svg { width: 18px; height: 18px; fill: var(--ink); }
.xsheet-top .x { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; color: var(--ink); }
.xsheet-top .x .icon { width: 12px; height: 12px; }
.xsheet-co { display: flex; align-items: center; gap: 12px; padding: 18px 20px 4px; }
.xsheet-co .pw-mark, .xu-co .pw-mark { width: 42px; height: 42px; border-radius: 13px; }
.xsheet-co .pw-mark svg { width: 21px; height: 21px; }
.xsheet-co b { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.035em; }
.xsheet-co b .seal { width: 17px; height: 17px; }
.xsheet-co small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.xsheet-score { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 20px 10px; }
.xsheet-score small { display: block; font-size: 12.5px; color: var(--muted); }
.xsheet-score b { font-size: 36px; font-weight: 500; letter-spacing: -.05em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.xsheet-score b i { font-style: normal; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.xsheet .xbar { margin: 0 20px 8px; }
.xsheet .xrows { padding: 4px 20px 0; }
.xsheet-cta { display: flex; align-items: center; justify-content: space-between; height: 46px; margin: 10px 12px 12px; padding: 0 16px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; }
.xsheet-cta .icon { width: 15px; height: 15px; }
/* The panel animates when it opens, not when the tab starts */
.go .xsheet .xt { animation: none; opacity: 0; }
.go .xsheet .xbar i { animation: none; width: 0; }
.xs.open .xsheet .xt { animation: xpop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--t, 0) * 110ms + 350ms); }
.xs.open .xsheet .xbar i { animation: xgrow 1.2s var(--ease) both .25s; width: var(--w); }

/* Install variant: hero on the left, code on the right, the badge appears */
.xs.split .xs-hero { width: 600px; justify-items: start; text-align: left; padding: 54px 0 0 56px; }
.xs.split .xs-h { font-size: 54px; }
.xs.split .xs-art { margin-top: 56px; }
.xcode { position: absolute; z-index: 2; right: 56px; top: 132px; width: 470px; border-radius: 20px; background: #f7f7f9; box-shadow: inset 0 0 0 1px var(--line-soft); overflow: hidden; }
.xcode-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; font-weight: 500; }
.xcode-file { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.xcode-line { display: flex; gap: 16px; padding: 20px 18px; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.xcode-line .ln { color: var(--faint); }
.xcode-line code { font-family: inherit; display: inline-block; overflow: hidden; vertical-align: bottom; }
.go .xcode-line code { animation: xtype 1.1s steps(40) both .55s; }
.xcode .k { color: var(--blue); }
.xcode .a { color: var(--muted); }
.xcode-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 12px 18px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.xcode-foot .ok { display: inline-flex; align-items: center; gap: 8px; }
.xcode-foot .ok .xt { width: 18px; height: 18px; }
.xcode-foot .copy { height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: inline-flex; align-items: center; font-weight: 500; }
.go .xs.split .wb { animation: xpop .6s cubic-bezier(.3, 1.5, .5, 1) backwards 1.75s; }

@container xw (max-width: 600px) {
  .xs-nav { padding: 14px 16px 14px 18px; }
  .xs-links, .xs-end { display: none; }
  .xs-burger { display: grid; }
  .xs-hero { justify-items: start; text-align: left; gap: 12px; padding: 22px 20px 0; }
  .xs-h { font-size: 38px; }
  .xs-p { font-size: 15px; }
  .xs-btns > span { height: 38px; padding: 0 16px; font-size: 13.5px; }
  .xs-art { width: auto; height: 480px; margin: 26px 12px 0; padding: 14px 12px 0; border-radius: 24px; }
  .xs-card { width: 100%; padding: 18px; gap: 16px; }
  .xs-card-top b { font-size: 28px; }
  .xs .wb { left: 14px; bottom: calc(var(--crop) * 1px + 16px); }
  .xsheet { left: 8px; right: 8px; top: auto; bottom: calc(var(--crop) * 1px + 8px); width: auto; border-radius: 28px; transform: translateY(48px); }
  .xsheet::before { content: ""; display: block; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #dedee2; }
  .xsheet-top { border-bottom: 0; padding-top: 8px; }
  .xs.split .xs-hero { width: auto; padding: 22px 20px 0; }
  .xs.split .xs-h { font-size: 36px; }
  .xs.split .xs-btns { display: none; }
  .xcode { position: relative; right: auto; top: auto; width: auto; margin: 22px 12px 0; }
  .xcode-line { gap: 10px; padding: 16px 14px; font-size: 11.4px; }
  .xs.split .xs-art { margin-top: 16px; }
}

/* ---------- Scene: Welo Page ---------- */
.xp { height: 100%; background: #fff; }
.xp-nav { display: flex; align-items: center; gap: 28px; height: 64px; padding: 0 40px; border-bottom: 1px solid var(--line-soft); }
.xp-links { display: flex; gap: 22px; font-size: 14px; color: var(--muted); }
.xp-search { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 260px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--soft); font-size: 13.5px; color: var(--faint); }
.xp-search .icon { width: 14px; height: 14px; color: var(--muted); }
.xp-main { display: grid; gap: 22px; padding: 34px 40px; }
.xp-head { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: end; }
.xp-co { display: flex; align-items: center; gap: 18px; }
.xp-co .pw-mark { width: 72px; height: 72px; border-radius: 21px; }
.xp-co .pw-mark svg { width: 36px; height: 36px; }
.xp-co b { display: flex; align-items: center; gap: 8px; font-size: 36px; font-weight: 600; letter-spacing: -.05em; line-height: 1.1; }
.xp-co b .seal { width: 26px; height: 26px; }
.xp-co small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.xp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.xp-score { padding: 18px 20px 20px; border-radius: 20px; background: var(--soft); }
.xp-score small { font-size: 13px; color: var(--muted); }
.xp-score b { display: block; margin: 2px 0 12px; font-size: 46px; font-weight: 500; letter-spacing: -.055em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.xp-score b i { font-style: normal; font-size: 16px; letter-spacing: 0; color: var(--muted); }
.xp-score .xbar { background: rgba(10, 10, 10, .07); }
.xp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.xp-card { padding: 18px 22px 6px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.xp-card h5 { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.xp-card .xrows li:first-child { border-top: 0; }
.xp-sc li { display: grid; grid-template-columns: minmax(0, 1fr) 40px; row-gap: 8px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.xp-sc li:first-child { border-top: 0; }
.xp-sc li b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.xp-sc .xbar { grid-column: 1 / -1; height: 3px; }

@container xw (max-width: 600px) {
  .xp-nav { gap: 10px; height: 54px; padding: 0 14px 0 16px; }
  .xp-links { display: none; }
  .xp-search { width: 36px; padding: 0; justify-content: center; }
  .xp-search span { display: none; }
  .xp-nav .xs-burger { display: grid; margin-left: 0; }
  .xp-main { gap: 14px; padding: 20px 16px; }
  .xp-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .xp-co { align-items: flex-start; gap: 14px; }
  .xp-co .pw-mark { width: 52px; height: 52px; border-radius: 15px; }
  .xp-co .pw-mark svg { width: 26px; height: 26px; }
  .xp-co b { font-size: 27px; }
  .xp-co b .seal { width: 20px; height: 20px; }
  .xp-co small { font-size: 13px; }
  .xp-score b { font-size: 40px; }
  .xp-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .xp-card { padding: 16px 18px 4px; }
}

/* ---------- Scene: reviews ---------- */
.xr { height: 100%; display: grid; gap: 24px; align-content: start; padding: 34px 40px 0; }
.xr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.xr-sum small { display: block; font-size: 13px; color: var(--muted); }
.xr-avg { display: flex; align-items: center; gap: 14px; font-size: 46px; font-weight: 500; letter-spacing: -.055em; line-height: 1.15; }
.xr-avg .rate svg { width: 20px; height: 20px; }
.xr-count { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.xr-count svg { width: 15px; height: 15px; fill: var(--ink); }
.xr-filters { display: flex; gap: 6px; }
.xr-filters span { height: 34px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); display: inline-flex; align-items: center; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.xr-filters span.on { background: var(--ink); color: #fff; box-shadow: none; }
.xr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.xr-col { display: grid; gap: 14px; }
.xr-col:nth-child(2) { margin-top: 32px; }
.xr-card { display: grid; gap: 10px; padding: 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.xr-card .top { display: flex; justify-content: space-between; align-items: center; }
.xr-card b { font-size: 16px; font-weight: 500; letter-spacing: -.015em; }
.xr-card p { font-size: 14px; line-height: 1.5; color: #4d4d55; }
.xr-card small { font-size: 12.5px; color: var(--muted); }
.xr-media { display: flex; gap: 8px; }
.xr-media span { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--soft); }
.xr-media img { width: 100%; height: 100%; object-fit: cover; }

@container xw (max-width: 600px) {
  .xr { gap: 16px; padding: 22px 16px 0; }
  .xr-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .xr-avg { font-size: 38px; gap: 12px; }
  .xr-avg .rate svg { width: 17px; height: 17px; }
  .xr-filters span { height: 32px; padding: 0 12px; font-size: 13px; }
  .xr-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .xr-col:nth-child(2) { margin-top: 0; }
  .xr-col { gap: 12px; }
  .xr-card { padding: 18px; }
}

/* ---------- Scene: updates ---------- */
.xu { height: 100%; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-content: start; padding: 46px 48px 0; }
.xu-side { display: grid; gap: 14px; align-content: start; }
.xu-co { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.xu-co .pw-mark { width: 34px; height: 34px; border-radius: 11px; }
.xu-co .pw-mark svg { width: 17px; height: 17px; }
.xu-co .seal { width: 15px; height: 15px; margin-left: -4px; }
.xu-t { margin-top: 10px; font-size: 42px; font-weight: 500; letter-spacing: -.05em; line-height: 1.05; }
.xu-side p { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 30ch; }
.xu-list { position: relative; display: grid; }
.xu-list::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 0; width: 1px; background: var(--line); }
.xu-list li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px; padding: 0 0 28px 32px; }
.xu-list li::before { content: ""; position: absolute; left: 1px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(10, 10, 10, .28); }
.xu-list li.new::before { background: var(--blue); box-shadow: 0 0 0 4px rgba(2, 133, 255, .16); }
.xu-list small { grid-column: 1; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.xu-list b { grid-column: 1; font-size: 19px; font-weight: 500; letter-spacing: -.025em; }
.xu-list .d { grid-column: 1; font-size: 14px; color: var(--muted); }
.xu-list .tag { grid-column: 2; grid-row: 1 / span 3; align-self: start; }

@container xw (max-width: 600px) {
  .xu { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 24px 18px 0; }
  .xu-t { margin-top: 4px; font-size: 34px; }
  .xu-side p { font-size: 14.5px; }
  .xu-list li { padding: 0 0 22px 28px; }
  .xu-list b { font-size: 16.5px; }
  .xu-list .d { font-size: 13.5px; }
  .xu-list .tag { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
}

/* ---------- Scene: status ---------- */
.xst { height: 100%; display: grid; justify-items: center; align-content: start; gap: 14px; padding-top: 72px; text-align: center; }
.xst-seal { position: relative; width: 84px; height: 84px; margin-bottom: 14px; }
.xst-seal .seal { position: relative; width: 84px; height: 84px; }
.xst-seal i { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(2, 133, 255, .3); animation: xring 3.2s ease-out infinite; }
.xst-seal i + i { animation-delay: 1.6s; }
.xst-t { font-size: 46px; font-weight: 500; letter-spacing: -.055em; line-height: 1.05; }
.xst-s { font-size: 16px; color: var(--muted); }
.xst-seg { display: flex; gap: 4px; margin-top: 18px; padding: 5px; border-radius: 999px; background: var(--soft); }
.xst-seg span { height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(10, 10, 10, .4); white-space: nowrap; }
.xst-seg span.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); }
.xst-note { margin-top: 4px; font-size: 13.5px; color: var(--muted); }

@container xw (max-width: 600px) {
  .xst { gap: 12px; padding: 54px 16px 0; }
  .xst-seal, .xst-seal .seal { width: 72px; height: 72px; }
  .xst-t { font-size: 34px; }
  .xst-s { font-size: 14.5px; }
  .xst-seg { flex-wrap: wrap; justify-content: center; border-radius: 24px; }
  .xst-seg span { height: 36px; padding: 0 12px; font-size: 13px; }
  .xst-note { max-width: 26ch; }
}

/* ---------- Scene: certificate ---------- */
.xc { height: 100%; display: grid; justify-items: center; align-content: start; padding-top: 44px; background: var(--soft); }
.xc .cert { box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); }
.xc .cert-row .tick path { stroke-dashoffset: 24; }
.go .xc .cert-row .tick { animation: xtickbg .35s ease both; animation-delay: calc(var(--t) * 380ms + 900ms); }
.go .xc .cert-row .tick path { animation: xdraw .45s var(--ease) both; animation-delay: calc(var(--t) * 380ms + 950ms); }
.go .xc .cert-row em { animation: xink .35s ease both; animation-delay: calc(var(--t) * 380ms + 900ms); }
.xc .cert-bar i { --w: 92%; width: 92%; }
.go .xc .cert-bar i { animation: xgrow 1.4s var(--ease) both 2.3s; }
.go .xc .cert-stamp { animation: xstamp .6s cubic-bezier(.3, 1.5, .5, 1) both 2.6s; }

@container xw (max-width: 600px) {
  .xc { padding: 22px 12px 0; }
  .xc .cert { width: 100%; }
  .xc .cert-head { margin: 0 6px; padding: 18px 16px 14px; }
  .xc .cert-main { padding: 18px 20px 4px; }
  .xc .cert-main h4 { font-size: 28px; }
  .xc .cert-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding: 14px 20px 16px; }
  .xc .cert-checks { margin: 0 20px; }
  .xc .cert-row { font-size: 13.5px; }
  .xc .cert-score { padding: 14px 20px 8px; }
  .xc .cert-bar { margin: 0 20px 24px; }
  .xc .cert-stamp { width: 64px; height: 64px; right: 16px; top: 72px; }
}

/* ---------- Scene: Welo widgets on a product page ---------- */
.xg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; padding: 30px 56px 0; }
.xg-art { height: 460px; border-radius: 28px; background: linear-gradient(180deg, #f1f1f8, #e8e8f4); display: grid; place-items: center; }
.xg-card { width: 300px; aspect-ratio: 1.586; padding: 20px; border-radius: 18px; background: var(--navy); color: #fff; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-6deg); }
.xg-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.03em; }
.xg-brand .pw-mark { width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .16); }
.xg-brand .pw-mark svg { width: 13px; height: 13px; }
.xg-num { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, .7); }
.xg-num i { font-style: normal; font-family: var(--mono); letter-spacing: .04em; }
.xg-info { display: grid; gap: 16px; justify-items: start; padding-top: 28px; }
.xg-info small { font-size: 14px; font-weight: 500; color: #6b6b80; }
.xg-h { max-width: 14ch; font-size: 40px; font-weight: 600; letter-spacing: -.05em; line-height: 1.05; color: var(--navy); }
.xg-cta { height: 44px; padding: 0 22px; font-size: 14px; }
.xg-chips { display: grid; gap: 10px; justify-items: start; }
.wg { position: relative; display: inline-flex; border-radius: 999px; }
.wg::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--blue); opacity: 0; pointer-events: none; }
.go .wg::after { animation: xhl 1.9s ease both; animation-delay: calc(var(--d, 0) * 90ms + 900ms); }

@container xw (max-width: 600px) {
  .xg { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 8px 14px 0; }
  .xg-art { height: 200px; border-radius: 22px; }
  .xg-card { width: 210px; padding: 14px; border-radius: 14px; }
  .xg-info { gap: 12px; padding-top: 0; }
  .xg-h { font-size: 28px; }
  .xg-cta { height: 40px; }
}

/* ---------- Scene: dashboard ---------- */
.xd { height: 100%; display: grid; grid-template-columns: 228px minmax(0, 1fr); }
.xd-side { display: grid; align-content: start; gap: 2px; padding: 22px 14px; border-right: 1px solid var(--line-soft); font-size: 14px; color: var(--muted); }
.xd-side .xp-logo { margin: 0 0 18px 10px; }
.xd-side span { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 10px; }
.xd-side span.on { background: var(--soft); color: var(--ink); font-weight: 500; }
.xd-side .icon { width: 16px; height: 16px; }
.xd-main { display: grid; gap: 20px; align-content: start; padding: 28px 36px; }
.xd-mtop { display: none; }
.xd-top { display: flex; justify-content: space-between; align-items: center; }
.xd-top b { font-size: 26px; font-weight: 500; letter-spacing: -.04em; }
.xd-range { display: flex; padding: 4px; border-radius: 999px; background: var(--soft); }
.xd-range span { height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.xd-range span.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); }
.xd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xd-kpis > div { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.xd-kpis small { font-size: 13px; color: var(--muted); }
.xd-kpis b { font-size: 34px; font-weight: 500; letter-spacing: -.05em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.xd-kpis .up { font-size: 12.5px; font-weight: 500; color: var(--blue); }
.xd-chart { padding: 18px 20px 22px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.xd-ch-top { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 14px; font-weight: 500; }
.xd-ch-top small { font-size: 13px; font-weight: 400; color: var(--muted); }
.xd-chart svg { display: block; width: 100%; height: 230px; overflow: visible; }
.xd-chart .grid { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.xd-chart .area { fill: url(#xdGrad); }
.xd-chart .ln { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.go .xd-chart .ln { animation: xline 1.8s var(--ease) both .7s; }
.go .xd-chart .area { animation: xfade 1s ease both 1.5s; }

@container xw (max-width: 600px) {
  .xd { grid-template-columns: minmax(0, 1fr); }
  .xd-side { display: none; }
  .xd-main { gap: 14px; padding: 0 16px; }
  .xd-mtop { display: flex; align-items: center; height: 54px; margin: 0 -16px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--line-soft); }
  .xd-top b { font-size: 24px; }
  .xd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xd-kpis > div:first-child { grid-column: 1 / -1; }
  .xd-kpis b { font-size: 28px; }
  .xd-chart svg { height: 170px; }
}

/* ---------- Business: three phones cut by their panel ---------- */
.xph-stage { position: relative; border-radius: var(--r-media); overflow: hidden; isolation: isolate; }
.xph-stage > .slot { z-index: -1; }
.xph-stage > .slot::after { top: 16px; bottom: auto; }
.xph-stage > .fit { max-width: 1120px; margin-inline: auto; overflow: hidden; }
.xphones { position: relative; width: 1120px; height: 640px; }
.xphones .xph { position: absolute; }
.xph-l { left: 30px; top: 118px; transform: scale(.94); transform-origin: top center; }
.xph-c { left: 380px; top: 44px; width: 360px; z-index: 2; }
.xph-r { left: 750px; top: 118px; transform: scale(.94); transform-origin: top center; }
@media (max-width: 760px) {
  .xphones { width: 380px; height: 600px; }
  .xph-l, .xph-r { display: none; }
  .xph-c { left: 10px; top: 34px; }
  .xph-stage > .slot::after { display: none; }
}

/* ---------- Hero tap demo, centered ---------- */
.mo-cb { left: 50%; bottom: 4%; width: min(460px, 70%); transform: translateX(-50%); }
@media (max-width: 760px) { .mo-cb { width: 88%; } }
.demo.center .wb { left: 50%; transform: translateX(-50%); }
.demo.center .wb.is-press { transform: translateX(-50%) scale(.97); }
.demo.center .mc { left: 0; right: 0; transform-origin: bottom center; }

/* ---------- Tall review cards: bigger stars ---------- */
.tcard .rate { gap: 3px; }
.tcard .rate svg { width: 18px; height: 18px; }

/* ---------- Icons in rounded squares ---------- */
.ip-ic { border-radius: 12px; }

/* ---------- Comparison with the Welo column first ---------- */
.ctable.welo-first .ct-row > span:nth-child(2) { color: var(--ink); }
.ctable.welo-first .ct-row > span:nth-child(3) { color: var(--muted); }
.ctable.welo-first .ct-row.ct-head span:last-child { color: var(--muted); font-weight: 400; display: inline; }
.ctable.welo-first .ct-row.ct-head span:nth-child(2) { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Search cells are information, not links ---------- */
.cell.ink { background: var(--btn); color: #fff; justify-content: flex-end; }

/* ---------- FAQ: smooth open and close ---------- */
.faq .answer { overflow: hidden; }
.faq details summary .pm { transition: transform .45s var(--ease), background-color .3s ease; }
.js .faq details[open] summary .pm { transform: none; }
.js .faq details.is-open summary .pm { transform: rotate(45deg); }
.faq summary:hover .pm { background: rgba(10, 10, 10, .09); }

/* ---------- Hero rotator: short words on phones, always one line ---------- */
.rot .w-sm { display: none; }
@media (max-width: 560px) {
  .rot > span { white-space: nowrap; }
  .rot .w-lg { display: none; }
  .rot .w-sm { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .xw-body [data-a], .xph [data-a], .xw-body .xt, .xph .xt { opacity: 1; }
  .go [data-a], .go .xt, .go .xbar i, .go .rate svg, .go .vb .seal, .go .wg::after, .go .xcode-line code, .xst-seal i { animation: none !important; }
}


/* ==========================================================================
   v7. Production replicas. The Welo Page, the badge dialog and the widgets
   copy public/welo-page, public/widgets/welobadge.js, widget.js and
   widgetv1-3.js, with the real Pennywise assets. Marketing adds motion only.
   ========================================================================== */
:root { --navy: #1f00ab; --navy-ink: #0f0148; }
.wi { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Pennywise: real logo and brand colors */
.pw-mark { width: 26px; height: 26px; border-radius: 0; background: none; }
.pw-mark svg { width: 100%; height: 100%; }
.pw-logo { color: var(--navy-ink); }
.xs-h, .xs-card-top b { color: var(--navy-ink); }

/* Reset helper: replays transitions inside a pane from their start */
.rs * { transition: none !important; }

/* ---------- Welo Badge: dismiss button, as in welobadge.js ---------- */
.wbw { position: absolute; z-index: 3; left: 28px; bottom: calc(var(--crop, 0) * 1px + 28px); }
.wbw .wb { position: relative; left: auto; bottom: auto; }
.wb-x { position: absolute; top: -6px; right: -6px; z-index: 4; width: 25px; height: 25px; border: 1px solid #dbdbdb; border-radius: 999px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .08); display: grid; place-items: center; opacity: 0; transition: opacity .22s ease; }
.wb-x svg { width: 14px; height: 14px; fill: none; stroke: #111; stroke-width: 2.8; stroke-linecap: round; }
.wbw .wb.is-open + .wb-x { opacity: 1; }

/* ---------- Welo Page (lib/welo-page/template.ts + public/welo-page) ---------- */
.wpx { position: relative; height: 100%; overflow: hidden; background: #f8f8f8; color: #0a0a0a; text-align: left; }
.wpx-top { position: relative; z-index: 4; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; background: #fff; border-bottom: 1px solid #ededed; }
.wpx-top > svg { width: 26px; height: 26px; fill: #0a0a0a; }
.wpx-wr { height: 30px; padding: 0 12px; border-radius: 999px; background: #0a0a0a; color: #fff; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }
.wpx-scroll { position: relative; transition: transform 2.2s var(--ease); will-change: transform; }
.wpx-in { width: 960px; max-width: calc(100% - 48px); margin: 0 auto; padding: 22px 0 60px; display: grid; gap: 22px; }
.wpx-cover { height: 290px; border: 1px solid #ebebeb; border-radius: 18px; overflow: hidden; background: #f9f7ff; }
.wpx-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpx-head { display: grid; grid-template-columns: minmax(0, 1fr) 196px 180px; gap: 14px; align-items: stretch; }
.wpx-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.wpx-logo { width: 128px; height: 128px; flex: none; display: grid; place-items: center; border: 1px solid #e6e6e6; border-radius: 26px; background: #fff; }
.wpx-logo img { width: 74%; height: auto; display: block; }
.wpx-meta { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.wpx-name { display: inline-flex; align-items: center; gap: 8px; font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.wpx-name .seal { width: 21px; height: 21px; }
.wpx-cat { font-size: 14px; color: #414141; }
.wpx-cat.m, .wpx-chip { display: none; }
.wpx-btns { display: flex; gap: 8px; margin-top: 14px; }
.wpx-btns > span { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.wpx-web { background: #e8f3ff; color: #0285ff; }
.wpx-web .wi { width: 14px; height: 14px; }
.wpx-leave { background: #0a0a0a; color: #fff; }
.wpx-card { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 14px; border: 1px solid #e6e6e6; border-radius: 18px; background: #fff; text-align: center; }
.wpx-card small { font-size: 12.5px; color: #6b6b6b; }
.wpx-rv b { font-size: 38px; font-weight: 500; letter-spacing: -.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wpx-rv b i { font-style: normal; font-size: 18px; letter-spacing: -.02em; }
.wpx-rv .rate svg { width: 17px; height: 17px; }
.wpx-aw img { width: 132px; height: auto; display: block; }
/* Floating pill nav */
.wpx-nav { justify-self: center; display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 10px 26px rgba(0, 0, 0, .08); }
.wpx-nav > span { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #9a9a9a; white-space: nowrap; }
.wpx-nav > span.on { background: #f2f2f2; color: #0a0a0a; font-weight: 500; }
.wpx-nav em { font-style: normal; }
/* The Welo Page nav floats at the bottom of the screen, as in production */
.wpx-fnav { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--crop, 0) * 1px + 16px); transform: translateX(-50%); }
/* Sections */
.wpx-sec { padding: 40px 44px; border: 1px solid #dcdbdb; border-radius: 20px; background: #fff; }
.wpx-sec h2 { font-size: 30px; font-weight: 500; letter-spacing: -.04em; line-height: 1.2; }
.wpx-sec p { font-size: 15px; line-height: 1.65; color: #414141; }
/* Company */
.wpx-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
.wpx-co p { margin-top: 16px; max-width: 46ch; }
.wpx-links { display: flex; gap: 8px; margin-top: 18px; }
.wpx-links span { height: 32px; padding: 0 12px; border-radius: 10px; background: #f2f2f2; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; }
.wpx-links .wi { width: 13px; height: 13px; }
.wpx-facts { align-self: center; display: grid; }
.wpx-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #ededed; font-size: 13.5px; }
.wpx-facts li:first-child { border-top: 0; }
.wpx-facts li span { color: #6b6b6b; }
/* Analysis conducted */
.wpx-an-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: end; }
.wpx-an-h p { margin-top: 14px; max-width: 44ch; }
.wpx-stats { display: flex; gap: 1px; overflow: hidden; border-radius: 18px; background: #ededed; }
.wpx-stats > div { flex: 1; min-width: 0; padding: 16px 18px; background: #f8f8f8; }
.wpx-stats span { display: block; font-size: 12.5px; color: #6b6b6b; }
.wpx-stats .m { display: none; }
.wpx-stats strong { display: block; margin-top: 5px; font-size: 28px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.wpx-rows { margin-top: 28px; }
.wpx-rows li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid #ededed; }
.wpx-rows li:last-child { border-bottom: 1px solid #ededed; }
.wpx-rows .wi { width: 18px; height: 18px; }
.wpx-rows .nm { flex: 1; font-size: 17px; font-weight: 500; letter-spacing: -.025em; }
.wpx-rows .st { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #414141; }
.wpx-rows .st i { width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: #528b39; }
.wpx-rows .sc { width: 65px; text-align: right; font-size: 13px; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.wpx-rows .ch { color: #9e9e9e; }
/* Certifications */
.wpx-certs { display: flex; gap: 14px; margin-top: 22px; }
.wpx-certs img { width: 64px; height: auto; display: block; }
/* Reviews summary */
.wpx-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; }
.wpx-sum-l { padding: 30px 34px; border-right: 1px solid #ededed; }
.wpx-avg { display: block; font-size: 52px; font-weight: 500; letter-spacing: -.05em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wpx-sum-l .rate { margin-top: 8px; }
.wpx-sum-l .rate svg { width: 17px; height: 17px; }
.wpx-sum-l > small { display: block; margin-top: 8px; font-size: 13px; color: #6b6b6b; }
.wpx-bars { display: grid; gap: 7px; margin-top: 16px; }
.wpx-bars li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 34px; align-items: center; gap: 12px; font-size: 12px; color: #414141; }
.wpx-bars li > i { position: relative; height: 6px; border-radius: 6px; background: #ededed; overflow: hidden; }
.wpx-bars li > i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 6px; background: #0a0a0a; }
.go .wpx-bars li > i::after { animation: xgrow 1.2s var(--ease) both; animation-delay: calc(var(--t, 0) * 80ms + 500ms); }
.wpx-bars li:nth-child(2) { --t: 1; } .wpx-bars li:nth-child(3) { --t: 2; } .wpx-bars li:nth-child(4) { --t: 3; } .wpx-bars li:nth-child(5) { --t: 4; }
.wpx-bars em { font-style: normal; text-align: right; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.wpx-sum-r { display: grid; align-content: end; gap: 10px; padding: 30px 34px; }
.wpx-sum-r p { margin-bottom: auto; font-size: 14px; color: #6b6b6b; max-width: 38ch; }
.wpx-ob { height: 42px; border: 1px solid #dbdbdb; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.wpx-ob.soft { border-color: #ececec; color: #6b6b6b; font-weight: 400; }
.wpx-ob .wi { width: 15px; height: 15px; }
.wpx-mod { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #ededed; font-size: 12px; color: #6b6b6b; }
.wpx-mod i { width: 7px; height: 7px; border-radius: 50%; background: #528b39; }
/* Review controls */
.wpx-ctl { display: flex; align-items: center; gap: 8px; }
.wpx-fp { display: flex; gap: 6px; }
.wpx-fp span { height: 36px; padding: 0 14px; border-radius: 12px; background: #fff; border: 1px solid #ececec; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.wpx-fp span.on { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.wpx-fp svg { width: 12px; height: 12px; fill: currentColor; }
.wpx-srch { flex: 1; height: 36px; padding: 0 12px; border: 1px solid #ececec; border-radius: 12px; background: #fff; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9a9a9a; }
.wpx-srch .wi { width: 15px; height: 15px; color: #6b6b6b; }
.wpx-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.wpx-chk i { width: 16px; height: 16px; border: 1px solid #d4d4d4; border-radius: 5px; background: #fff; }
.wpx-sort { height: 36px; padding: 0 12px; border: 1px solid #ececec; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; white-space: nowrap; }
.wpx-sort .wi { width: 14px; height: 14px; }
/* Review cards (public/widgets/Full-Reviews.js) */
.frvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.frv { display: grid; gap: 10px; padding: 20px; border: 1px solid #e6e6e6; border-radius: 16px; background: #fff; }
.frv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.frv .rate { gap: 3px; }
.frv .rate svg { width: 17px; height: 17px; }
.frv-v { height: 30px; padding: 0 11px 0 9px; border: 1px solid #e6e6e6; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.frv-v .wi { width: 15px; height: 15px; stroke-width: 1.8; }
.frv b { font-size: 16.5px; font-weight: 500; letter-spacing: -.015em; }
.frv p { font-size: 13.5px; line-height: 1.55; color: #555; }
.frv-m { display: flex; gap: 8px; }
.frv-m span { width: 72px; height: 72px; overflow: hidden; border-radius: 12px; background: #f2f2f2; }
.frv-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frv-a { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.frv-a i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.frv-a small { font-size: 13px; font-weight: 400; color: #9a9a9a; }
.frv-a small::before { content: "•"; margin-right: 6px; font-size: 9px; vertical-align: 2px; color: #c8c8c8; }
.frv-f { display: flex; gap: 20px; padding-top: 12px; border-top: 1px solid #ededed; font-size: 12.5px; color: #8a8a8a; }
.frv-f span { display: inline-flex; align-items: center; gap: 6px; }
.frv-f .wi { width: 13px; height: 13px; }
.go .frv-v .wi { animation: xpop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * 90ms + 650ms); }
.av-y { background: #f8e2a8; color: #7a5a06; } .av-g { background: #ddf2cf; color: #3f6b22; } .av-p { background: #e6ddfb; color: #5a3fa8; } .av-b { background: #d9ecfd; color: #1f5f99; }
/* Updates */
.wpx-up h2 { font-size: 22px; }
.wpx-up-h { display: flex; justify-content: space-between; align-items: center; }
.wpx-up-h > span { height: 32px; padding: 0 14px; border-radius: 999px; background: #0a0a0a; color: #fff; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; }
.wpx-ul { margin-top: 18px; display: grid; }
.wpx-ul > li { display: grid; gap: 4px; justify-items: start; padding: 18px 0; border-top: 1px solid #ededed; }
.wpx-ul .k { height: 22px; padding: 0 8px; border: 1px solid #e6e6e6; border-radius: 7px; font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.wpx-ul small { margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: #8a8a8a; }
.wpx-ul b { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.wpx-ul span.d { font-size: 13.5px; color: #555; }
/* The newest update arrives on top */
.wpx-ul > li.new { overflow: hidden; }
.go .wpx-ul > li.new { animation: wnew 1.1s var(--ease) both 1.5s; }
.go .wpx-ul > li.new .k i { animation: wdot 1.4s ease-out 2.4s 2 both; }
@keyframes wnew { from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } 60% { opacity: 0; } to { max-height: 160px; opacity: 1; } }
.wpx-ul .k i { width: 6px; height: 6px; border-radius: 50%; background: #528b39; }

@container xw (max-width: 600px) {
  .wpx-top { height: 48px; padding: 0 14px 0 16px; }
  .wpx-top > svg { width: 28px; height: 28px; }
  .wpx-in { width: auto; max-width: none; padding: 0 0 40px; gap: 16px; }
  .wpx-in > .wpx-sec, .wpx-in > .wpx-ctl, .wpx-in > .frvs { margin-inline: 12px; }
  .wpx-cover { height: 150px; border: 0; border-bottom: 1px solid #ebebeb; border-radius: 0; }
  .wpx-head { display: block; margin-top: -62px; padding: 0 18px; }
  .wpx-id { flex-direction: column; align-items: flex-start; gap: 16px; }
  .wpx-logo { width: 100px; height: 100px; border-radius: 22px; }
  .wpx-meta { gap: 6px; }
  .wpx-cat.d, .wpx-btns, .wpx-rv, .wpx-aw { display: none; }
  .wpx-cat.m { display: block; font-size: 15px; color: #9a9a9a; }
  .wpx-name { font-size: 24px; }
  .wpx-name .seal { width: 19px; height: 19px; }
  .wpx-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; height: 30px; padding: 0 10px; border: 1px solid #dcdbdb; border-radius: 6px; font-size: 13px; }
  .wpx-chip b { font-weight: 500; }
  .wpx-chip > i { width: 3px; height: 3px; border-radius: 50%; background: #6b6b6b; }
  .wpx-chip .rate svg { width: 12px; height: 12px; }
  .wpx-nav { padding: 5px; gap: 2px; }
  .wpx-nav > span { height: 36px; padding: 0 11px; }
  .wpx-nav > span:not(.on) em { display: none; }
  .wpx-sec { padding: 24px 20px; border-radius: 18px; }
  .wpx-sec h2 { font-size: 24px; }
  .wpx-sec p { font-size: 14px; }
  .wpx-co { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wpx-links { flex-wrap: wrap; }
  .wpx-an-h { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wpx-stats > div { padding: 12px; }
  .wpx-stats .d { display: none; }
  .wpx-stats .m { display: block; }
  .wpx-stats strong { font-size: 24px; }
  .wpx-rows { margin-top: 18px; }
  .wpx-rows li { gap: 8px; padding: 14px 0; }
  .wpx-rows .wi { width: 15px; height: 15px; }
  .wpx-rows .nm { font-size: 14.5px; }
  .wpx-rows .st { font-size: 11px; }
  .wpx-rows .st i { width: 5px; height: 5px; margin-right: 0; }
  .wpx-rows .sc { width: 52px; font-size: 11px; }
  .wpx-rows .ch { width: 14px; }
  .wpx-sum { grid-template-columns: minmax(0, 1fr); }
  .wpx-sum-l { padding: 22px 20px 18px; border-right: 0; }
  .wpx-sum-r { padding: 0 20px 20px; }
  .wpx-sum-r p { display: none; }
  .wpx-avg { font-size: 44px; }
  .wpx-ctl { flex-wrap: wrap; }
  .wpx-fp { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .wpx-srch { flex: 1 1 100%; }
  .wpx-sort { margin-left: auto; }
  .frvs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .frv { padding: 18px; }
  .frvs > .frv:nth-child(n+4) { display: none; }
  .wpx-up h2 { font-size: 20px; }
}

/* ---------- Scenes built from the replicas ---------- */
/* Window panes: the page sits flush in the window */
.xw-body .wpx { height: 100%; }
/* Status pane: gold level */
.xst-seal i { border-color: rgba(205, 170, 30, .4); }

/* Real widgets on a product page (widget.js, widgetv1-3.js) */
.wgr { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 1px solid #e6e6e6; border-radius: 40px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); color: #141414; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: normal; }
.wgr strong { font-weight: 600; }
.wgr svg.lg { width: 17px; height: 17px; fill: #141414; margin-left: 2px; }
.wgr .dv { color: #d0d0d0; font-weight: 400; margin: 0 2px; }
.wgr svg.st { width: 16px; height: 16px; fill: #141414; }
.wgt { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid #dbdbdb; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); color: #141414; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; letter-spacing: normal; }
.wgt > i { width: 9px; height: 9px; border-radius: 50%; background: #a5b900; animation: wgt 2s ease-out infinite; }
@keyframes wgt { 0% { box-shadow: 0 0 0 0 rgba(165, 185, 0, .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(165, 185, 0, 0); } }
.wgt svg { width: 16px; height: 16px; fill: #141414; }
.xg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.xg-rows { display: grid; gap: 12px; margin-top: 4px; }
.xg-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #ededf3; font-size: 14px; color: #5f5f75; }
.go .wg::after { animation-delay: calc(var(--d, 0) * 90ms + 1100ms); }

@container xw (max-width: 600px) {
  .wbw { left: 14px; bottom: calc(var(--crop, 0) * 1px + 16px); }
  .wb { height: 52px; }
  .wb-logo { width: 52px; height: 52px; flex-basis: 52px; }
  .wb:not(.is-open) { width: 52px; }
  .wb-logo svg { width: 26px; height: 26px; }
  .wb-title { font-size: 15px; }
  .wb-sub { font-size: 11px; }
  .wb-x { width: 24px; height: 24px; }
}

/* Business phones */
.xph .wpx { height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .wgt > i, .go .wpx-ul > li.new, .go .wpx-bars li > i::after { animation: none !important; }
}

/* ---------- v7.1 ---------- */
/* No fake address bars: windows keep the dots, phones keep the status bar */
.xw-addr { display: none !important; }
.xw-bar { justify-content: flex-start; }
.xph-bar { padding-bottom: 6px; }
/* Phones in the business section: the nav sits at the visible bottom */
.xph-c { --crop: 236; }
.xph-l, .xph-r { --crop: 272; }
@media (max-width: 760px) { .xph-c { --crop: 262; } }


/* ==========================================================================
   v8. One idea per scene, almost no text. Real Welo pieces (badge, checkmark,
   review card, widgets) on quiet, wordless surroundings.
   ========================================================================== */

/* Client logos: eight, one row on desktop */
.logos.l8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 28px; }
.logos.l8 img { height: calc(var(--h, 30px) * .82); }
@media (max-width: 1100px) { .logos.l8 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 34px; } .logos.l8 img { height: var(--h, 30px); } }
@media (max-width: 560px) { .logos.l8 { gap: 18px; row-gap: 26px; } .logos.l8 img { height: calc(var(--h, 30px) * .62); } }

/* ---------- Welo card: who the business is and what passed ---------- */
.wc { width: 340px; padding: 4px 20px 8px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .07); color: var(--ink); text-align: left; }
.wc-h { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.wc-logo { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid #e8e8e8; border-radius: 13px; background: #fff; }
.wc-logo img { width: 68%; height: auto; display: block; }
.wc-id { display: grid; gap: 1px; min-width: 0; }
.wc-id b { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
.wc-id b .seal { width: 17px; height: 17px; }
.wc-id small { font-size: 12.5px; color: var(--muted); }
.wc-rows li { display: flex; align-items: center; gap: 12px; height: 46px; border-top: 1px solid var(--line-soft); font-size: 15px; }
.wc-rows li > .wi { width: 18px; height: 18px; color: rgba(10, 10, 10, .45); }
.wc-rows .lb { color: var(--faint); }
.wc-rows .xt { margin-left: auto; opacity: 0; }
.wc-rows li:nth-child(2) { --t: 1; } .wc-rows li:nth-child(3) { --t: 2; } .wc-rows li:nth-child(4) { --t: 3; } .wc-rows li:nth-child(5) { --t: 4; } .wc-rows li:nth-child(6) { --t: 5; }
/* Rows confirm one by one: the tick pops, the word turns black */
.go .wc .xt { animation: none; opacity: 0; }
.open .wc .xt, .go .spg .xt { animation: xpop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--t, 0) * 280ms + 550ms); }
.open .wc-rows .lb, .go .spg .wc-rows .lb { animation: wink .4s ease both; animation-delay: calc(var(--t, 0) * 280ms + 550ms); }
@keyframes wink { from { color: var(--faint); } to { color: var(--ink); } }

/* ---------- Hero: only the badge. Tap it, the card rises ---------- */
.mo-tap { left: 50%; top: 50%; width: min(540px, 88%); transform: translate(-50%, -50%); }
.tap { position: relative; width: 420px; height: 404px; }
.tap .wc { position: absolute; left: 40px; bottom: 98px; opacity: 0; transform: translateY(18px) scale(.97); transform-origin: 50% 100%; transition: opacity .4s ease, transform .75s var(--ease); }
.tap.open .wc { opacity: 1; transform: none; }
.tap .wbw { left: 70px; bottom: 22px; }
.tap .cursor { z-index: 9; }
@media (max-width: 760px), (hover: none) {
  .tap .cursor { filter: none; }
  .tap .cursor svg { display: none; }
  .tap .cursor::after { content: ""; position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(10, 10, 10, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); transform: translate(-30%, -30%); transition: transform .15s ease, background-color .15s ease; }
  .tap .cursor.is-click::after { transform: translate(-30%, -30%) scale(.78); background: rgba(10, 10, 10, .28); }
}

/* ---------- Scene: any website, the badge in the corner ---------- */
.sks { position: relative; height: 100%; overflow: hidden; background: #fff; }
.sks-links i, .sks-hero i, .sks-nav > i { display: block; border-radius: 8px; background: #efeff2; }
.wgr svg, .wgt svg, .wgt > i { flex: none; }
.sks-nav { display: flex; align-items: center; gap: 40px; padding: 24px 40px; }
.sks-nav .pw-mark { width: 28px; height: 28px; }
.sks-links { display: flex; gap: 22px; }
.sks-links i { width: 52px; height: 10px; }
.sks-links i:nth-child(2) { width: 64px; } .sks-links i:nth-child(3) { width: 44px; } .sks-links i:nth-child(4) { width: 38px; }
.sks-nav > i { margin-left: auto; width: 110px; height: 36px; border-radius: 999px; background: #e9e9ee; }
.sks-hero { display: grid; justify-items: center; gap: 14px; padding-top: 52px; }
.sks-hero .t1 { width: 560px; height: 46px; border-radius: 12px; background: #ebebef; }
.sks-hero .t2 { width: 380px; height: 46px; border-radius: 12px; background: #ebebef; }
.sks-hero .p1 { width: 320px; height: 12px; margin-top: 10px; background: #f2f2f4; }
.sks-ctas { display: flex; gap: 10px; margin-top: 12px; }
.sks-ctas i { width: 128px; height: 42px; border-radius: 999px; }
.sks-ctas i:first-child { background: var(--navy); }
.sks-art { width: 820px; height: 360px; margin: 44px auto 0; border-radius: 28px; background: #f5f5f7; }
.sks .wbw { left: 28px; bottom: calc(var(--crop, 0) * 1px + 28px); }
.sks-veil { position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .45s ease; }
.sks.open .sks-veil { opacity: 1; }
.sks .wc { position: absolute; z-index: 6; right: 40px; top: 40px; opacity: 0; transform: translateX(26px); transition: opacity .4s ease, transform .75s var(--ease); }
.sks.open .wc { opacity: 1; transform: none; }
/* Business: the badge arrives on the site first */
.go .sks.pop .wbw { animation: xpop .6s cubic-bezier(.3, 1.5, .5, 1) backwards .5s; }

@container xw (max-width: 600px) {
  .sks-nav { gap: 0; padding: 16px 18px; }
  .sks-links { display: none; }
  .sks-nav > i { width: 36px; border-radius: 50%; }
  .sks-hero { justify-items: start; gap: 10px; padding: 28px 20px 0; }
  .sks-hero .t1 { width: 300px; height: 36px; }
  .sks-hero .t2 { width: 200px; height: 36px; }
  .sks-hero .p1 { width: 260px; }
  .sks-ctas i { width: 112px; height: 40px; }
  .sks-art { width: auto; height: 320px; margin: 28px 14px 0; border-radius: 24px; }
  .sks .wbw { left: 14px; bottom: calc(var(--crop, 0) * 1px + 16px); }
  .sks .wc { left: 10px; right: 10px; top: auto; bottom: calc(var(--crop, 0) * 1px + 10px); width: auto; border-radius: 26px; transform: translateY(40px); }
}

/* ---------- Scene: the Welo Page, reduced to what was verified ---------- */
.spg { height: 100%; display: grid; justify-items: center; align-content: start; padding-top: 40px; background: #f8f8f8; }
.spg-card { position: relative; width: 600px; overflow: hidden; border: 1px solid #e4e4e4; border-radius: 24px; background: #fff; }
.spg-band { height: 84px; background: #f7f5ff; }
.spg-head { display: flex; align-items: flex-end; gap: 16px; margin-top: -36px; padding: 0 28px 18px; }
.spg-head .wc-logo { width: 76px; height: 76px; border-radius: 20px; }
.spg-head .wc-id b { font-size: 22px; }
.spg-head .wc-id b .seal { width: 20px; height: 20px; }
.spg-score { margin-left: auto; display: flex; align-items: baseline; gap: 3px; }
.spg-score b { font-size: 38px; font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.spg-score small { font-size: 14px; color: var(--muted); }
.spg .wc-rows { padding: 0 28px 10px; }
.spg .wc-rows li { height: 50px; font-size: 16px; }
@container xw (max-width: 600px) {
  .spg { padding: 22px 12px 0; }
  .spg-card { width: 100%; border-radius: 22px; }
  .spg-band { height: 70px; }
  .spg-head { flex-wrap: wrap; gap: 12px; padding: 0 20px 14px; }
  .spg-head .wc-logo { width: 64px; height: 64px; border-radius: 17px; }
  .spg-head .wc-id { order: 3; width: 100%; }
  .spg-score { margin-bottom: 4px; }
  .spg .wc-rows { padding: 0 20px 8px; }
  .spg .wc-rows li { height: 48px; font-size: 15px; }
}

/* ---------- Scene: a new review is checked, then published ---------- */
.srv { height: 100%; display: grid; justify-items: center; align-content: start; gap: 14px; padding-top: 44px; background: #f8f8f8; }
.srv .frv { width: 520px; gap: 12px; }
.srv .frv b { font-size: 18px; }
.srv .frv-old { opacity: .55; }
.srv-new { position: relative; }
.srv-new::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; box-shadow: 0 0 0 2px var(--blue); opacity: 0; pointer-events: none; }
.go .srv-new::after { animation: xhl 1.6s ease both 2.5s; }
/* The chip changes from "Checking" to "Verified by Welo" */
.srv-chip { position: relative; display: grid; justify-items: end; }
.srv-chip > span { grid-area: 1 / 1; }
.srv-chk { height: 30px; padding: 0 12px 0 10px; border-radius: 999px; background: #f2f2f2; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.srv-chk i { width: 12px; height: 12px; border: 1.6px solid rgba(10, 10, 10, .18); border-top-color: rgba(10, 10, 10, .6); border-radius: 50%; animation: wspin .8s linear infinite; }
@keyframes wspin { to { transform: rotate(360deg); } }
.srv-chip .frv-v { opacity: 0; }
.go .srv-chk { animation: wout .3s ease both 2.4s; }
.go .srv-chip .frv-v { animation: xpop .5s cubic-bezier(.3, 1.5, .5, 1) both 2.5s; }
@keyframes wout { to { opacity: 0; transform: scale(.9); } }
.go .srv-new { animation: xin .8s var(--ease) both .2s; }
.srv .frv-old { transition: none; }
.go .srv .frv-old { animation: wdown .8s var(--ease) both .2s; }
@keyframes wdown { from { transform: translateY(-40px); } to { transform: none; } }
@container xw (max-width: 600px) {
  .srv { padding: 24px 12px 0; gap: 12px; }
  .srv .frv { width: 100%; }
  .srv .frv b { font-size: 16.5px; }
}

/* ---------- Scene: reviews with photos and videos ---------- */
.smd { height: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 16px; padding-top: 44px; background: #f8f8f8; }
.smd-card { width: 270px; flex: none; display: grid; gap: 12px; padding: 10px 10px 16px; border: 1px solid #e6e6e6; border-radius: 22px; background: #fff; }
.smd-m { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 15px; background: #f2f2f2; }
.smd-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smd-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; }
.smd-play svg { width: 20px; height: 20px; fill: var(--ink); margin-left: 3px; }
.smd-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.smd-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: #fff; }
.go .smd-bar i { animation: wplay 5.2s linear both 1.2s; }
@keyframes wplay { to { width: 100%; } }
.go .smd-play { animation: wplaybtn 5.2s ease both 1.2s; }
@keyframes wplaybtn { 0% { transform: none; opacity: 1; } 8% { transform: scale(.86); opacity: 0; } 100% { opacity: 0; } }
.smd-f { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.smd-f .rate svg { width: 15px; height: 15px; }
.smd-f .wi { width: 18px; height: 18px; color: var(--blue); stroke-width: 1.8; }
.smd-f + small { padding: 0 6px; margin-top: -6px; font-size: 13.5px; font-weight: 500; }
.smd-card:nth-child(2) { margin-top: 34px; }
@container xw (max-width: 600px) {
  .smd { justify-content: flex-start; gap: 12px; padding: 24px 0 0 14px; }
  .smd-card { width: 230px; }
  .smd-card:nth-child(2) { margin-top: 0; }
}

/* ---------- Scene: one change, recorded with a date ---------- */
.sup { height: 100%; display: grid; justify-items: center; align-content: start; padding-top: 44px; background: #f8f8f8; }
.sup-card { width: 560px; padding: 26px 30px 10px; border: 1px solid #e4e4e4; border-radius: 24px; background: #fff; }
.sup-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.sup-h .wc-logo { width: 34px; height: 34px; border-radius: 10px; }
.sup-list { position: relative; }
.sup-list::before { content: ""; position: absolute; left: 4px; top: 30px; bottom: 30px; width: 1px; background: var(--line); }
.sup-list li { position: relative; display: grid; gap: 4px; padding: 18px 0 18px 30px; border-top: 1px solid var(--line-soft); }
.sup-list li:first-child { border-top: 0; }
.sup-list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(10, 10, 10, .25); }
.sup-list small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sup-list b { font-size: 18px; font-weight: 500; letter-spacing: -.025em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-list s { color: var(--faint); text-decoration-thickness: 1.5px; }
.sup-list em { font-style: normal; color: var(--blue); }
.sup-list .xt { width: 18px; height: 18px; opacity: 1; animation: none !important; }
.sup-list .xt .icon { width: 11px; height: 11px; }
/* The newest change slides in on top, its dot turns blue */
.sup-list li.new { overflow: hidden; }
.sup-list li.new::before { background: var(--blue); box-shadow: 0 0 0 4px rgba(2, 133, 255, .16); }
.go .sup-list li.new { animation: wnew2 1s var(--ease) both .9s; }
@keyframes wnew2 { from { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } 50% { opacity: 0; } to { max-height: 120px; opacity: 1; } }
.sup-list li.new s { position: relative; }
.go .sup-list li.new em { animation: xin .6s var(--ease) both 2.1s; }
@container xw (max-width: 600px) {
  .sup { padding: 24px 12px 0; }
  .sup-card { width: 100%; padding: 22px 20px 8px; }
  .sup-list b { font-size: 16.5px; }
}

/* ---------- Business: certificate, only the essentials ---------- */
.cert-fields, .cert-score, .cert-bar { display: none !important; }
.cert-checks { padding-bottom: 18px; }

/* ---------- Business: widgets appear where customers decide ---------- */
.swg-main { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 56px; padding: 26px 56px 0; }
.swg-art { height: 440px; border-radius: 28px; background: linear-gradient(180deg, #f3f2fb, #eae8f6); display: grid; place-items: center; }
.swg-card { width: 290px; aspect-ratio: 1.586; padding: 20px; border-radius: 18px; background: var(--navy); transform: rotate(-6deg); display: flex; flex-direction: column; justify-content: space-between; }
.swg-card .pw-mark { width: 30px; height: 30px; padding: 3px; border-radius: 9px; background: #fff; }
.swg-card i { width: 70px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .28); align-self: flex-end; }
.swg-info { display: grid; justify-items: start; align-content: start; gap: 14px; padding-top: 30px; }
.swg-info > i { display: block; border-radius: 10px; background: #ececf0; }
.swg-info .t1 { width: 360px; height: 34px; }
.swg-info .t2 { width: 250px; height: 34px; }
.swg-info .p1 { width: 320px; height: 11px; margin-top: 10px; background: #f2f2f4; }
.swg-info .p2 { width: 260px; height: 11px; background: #f2f2f4; }
.swg-info .cta { width: 150px; height: 44px; margin-top: 8px; border-radius: 999px; background: var(--navy); }
.swg-info .wg { margin-top: 6px; }
@container xw (max-width: 600px) {
  .swg-main { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 8px 14px 0; }
  .swg-art { height: 190px; border-radius: 22px; }
  .swg-card { width: 200px; padding: 14px; border-radius: 14px; }
  .swg-info { gap: 12px; padding-top: 0; }
  .swg-info .t1 { width: 280px; height: 28px; }
  .swg-info .t2 { width: 190px; height: 28px; }
  .swg-info .p1 { width: 260px; }
  .swg-info .p2 { width: 200px; }
  .swg .wgr { font-size: 13.5px; padding: 9px 14px; }
  .swg .wgt { font-size: 13px; }
}

/* ---------- Business: one number, how often customers check you ---------- */
.sdb { height: 100%; display: grid; justify-items: center; align-content: start; padding-top: 44px; background: #f8f8f8; }
.sdb-card { width: 720px; padding: 28px 30px 30px; border: 1px solid #e4e4e4; border-radius: 24px; background: #fff; }
.sdb-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.sdb-num { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 22px; }
.sdb-num b { font-size: 64px; font-weight: 500; letter-spacing: -.055em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sdb-num span { height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(2, 133, 255, .1); color: var(--blue); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; }
.sdb .xd-chart { padding: 0; box-shadow: none; }
.sdb .xd-chart svg { height: 240px; }
@container xw (max-width: 600px) {
  .sdb { padding: 24px 12px 0; }
  .sdb-card { width: 100%; padding: 22px 20px 24px; }
  .sdb-num b { font-size: 48px; }
  .sdb .xd-chart svg { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .wc .xt, .xw-body .wc .xt { opacity: 1; animation: none !important; }
  .wc-rows .lb { color: var(--ink); animation: none !important; }
  .srv-chk { display: none; }
  .srv-chip .frv-v { opacity: 1; animation: none !important; }
  .go .srv-new, .go .srv .frv-old, .go .smd-bar i, .go .smd-play, .go .sup-list li.new, .go .sup-list li.new em, .srv-chk i { animation: none !important; }
}

/* ==========================================================================
   v9. No browser window and no fake site: the scenes sit on the sky.
   ========================================================================== */
.logos.l9 { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 24px; }
.logos.l9 img { height: calc(var(--h, 30px) * .8); }
@media (max-width: 1100px) { .logos.l9 img { height: calc(var(--h, 30px) * .62); } .logos.l9 { gap: 16px; } }
@media (max-width: 760px) { .logos.l9 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; row-gap: 30px; } .logos.l9 img { height: calc(var(--h, 30px) * .74); } }

/* Stage without chrome. It keeps the "xw" container so every scene still reflows on phones. */
.xn { --crop: 0; position: relative; width: 1180px; color: var(--ink); container: xw / inline-size; }
.xn-body { position: relative; height: 600px; overflow: hidden; }
.xn-body > .panes { height: 100%; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.xn-body > .panes > [data-i] { height: 100%; min-height: 0; overflow: hidden; }
.xn-body [data-a], .xn-body .xt { opacity: 0; }
@media (max-width: 760px) { .xn { width: 380px; } .xn-body { height: 640px; } }
.xn .spg, .xn .sup, .xn .sdb, .xn .xc { background: transparent; }
.xn .spg-card, .xn .sup-card { border-color: transparent; }
.xn .xc .cert { box-shadow: none; }

/* Status: on a white card */
.xn .xst { height: auto; width: 640px; margin: 36px auto 0; padding: 56px 32px 46px; border-radius: 24px; background: #fff; }
@container xw (max-width: 600px) { .xn .xst { width: auto; margin: 22px 12px 0; padding: 44px 18px 36px; } }

/* ---------- Badge pane: badge on the left, the card slides out on the right ---------- */
.tpane { height: 100%; display: grid; justify-items: center; align-content: start; padding-top: 72px; }
.tap-x { width: 760px; height: 340px; }
.tap-x .wbw { left: 20px; top: 142px; bottom: auto; }
.tap-x .wc { left: auto; right: 20px; top: 34px; bottom: auto; transform: translateX(-36px) scale(.97); transform-origin: 0 50%; }
.tap-x.open .wc { transform: none; }
.go .tap-x.pop .wbw { animation: xpop .6s cubic-bezier(.3, 1.5, .5, 1) backwards .35s; }
@container xw (max-width: 600px) {
  .tpane { padding-top: 40px; }
  .tap-x { width: 360px; height: 420px; }
  .tap-x .wbw { left: 44px; top: auto; bottom: 26px; }
  .tap-x .wc { left: 10px; right: 10px; top: 20px; width: auto; transform: translateY(18px) scale(.97); transform-origin: 50% 100%; }
}

/* ---------- Review card, as on the Welo Page (public/welo-page/reviews.js) ---------- */
.srw { height: 100%; display: grid; justify-items: center; align-content: start; padding-top: 40px; }
.srw-col { width: 640px; display: grid; gap: 14px; }
.srw-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rvc { position: relative; padding: 24px 24px 12px; border: 1px solid #e9e9e9; border-radius: 20px; background: #fefefe; box-shadow: 0 0 7px rgba(0, 0, 0, .03); text-align: left; }
.rvc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rvc .rate { gap: 2px; color: #171717; }
.rvc .rate svg { width: 18px; height: 18px; }
.rvc-v { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid #ededed; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.rvc-v .wi { width: 16px; height: 16px; stroke-width: 1.8; }
.rvc-t { margin-top: 16px; font-size: 18.5px; font-weight: 600; letter-spacing: -.025em; line-height: 1.4; }
.rvc-x { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #555; }
.rvc-m { display: flex; gap: 8px; margin-top: 16px; }
.rvc-m > span { position: relative; width: 92px; height: 106px; flex: none; overflow: hidden; border: 1px solid #ededed; border-radius: 14px; background: #f8f8f8; }
.rvc-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rvc-play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.rvc-play svg { width: 14px; height: 14px; fill: #111; margin-left: 2px; }
.rvc-u { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.rvc-u i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 600; }
.rvc-u b { font-size: 14.5px; font-weight: 500; }
.rvc-u small { font-size: 13.5px; color: #8c8c8c; }
.rvc-u small::before { content: "•"; margin-right: 6px; font-size: 10px; vertical-align: 1px; }
.rvc-a { display: flex; gap: 18px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #f2f2f2; font-size: 13px; color: #6b6b6b; }
.rvc-a span { display: inline-flex; align-items: center; gap: 6px; }
.rvc-a .wi { width: 14px; height: 14px; }
.srw-two .rvc-x { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Checking, then Verified by Welo. No outlines, no glow. */
.rvc-chip { display: grid; justify-items: end; }
.rvc-chip > span { grid-area: 1 / 1; }
.rvc-chk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #f4f4f5; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.rvc-chk i { width: 13px; height: 13px; border: 1.6px solid rgba(10, 10, 10, .15); border-top-color: rgba(10, 10, 10, .55); border-radius: 50%; animation: wspin .8s linear infinite; }
.rvc-chip .rvc-v { opacity: 0; }
.go .rvc-new { animation: xin .8s var(--ease) both .15s; }
.go .rvc-new .rvc-m > span { animation: xpop .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: .7s; }
.go .rvc-new .rvc-m > span + span { animation-delay: .82s; }
.go .rvc-chk { animation: wout .3s ease both 2.3s; }
.go .rvc-chip .rvc-v { animation: wchip .55s var(--ease) both 2.4s; }
@keyframes wchip { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
.go .rvc-old { animation: xin .8s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 300ms); }
@container xw (max-width: 600px) {
  .srw { padding: 20px 12px 0; }
  .srw-col { width: 100%; gap: 12px; }
  .srw-two { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rvc { padding: 18px 18px 10px; }
  .rvc .rate svg { width: 15px; height: 15px; }
  .rvc-v, .rvc-chk { padding: 6px 9px; gap: 5px; font-size: 11px; }
  .rvc-v .wi { width: 14px; height: 14px; }
  .rvc-t { margin-top: 12px; font-size: 16.5px; }
  .rvc-x { font-size: 14px; }
  .rvc-m > span { width: 84px; height: 96px; }
}

/* ---------- Widgets: only the real ones, arriving one by one ---------- */
.swd { height: 100%; display: flex; justify-content: center; align-items: flex-start; padding-top: 96px; }
.sw-i { display: inline-flex; }
.sw-0, .sw-1 { flex-basis: 100%; justify-content: center; }
.sw-b { position: relative; left: auto; bottom: auto; }
.sw-b .wb { position: relative; left: auto; bottom: auto; }
.swd .wgr, .swd .wgt { box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.go .sw-i { animation: wpop .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 260ms + 300ms); }
@keyframes wpop { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
.xn-body .sw-i { opacity: 0; }
@container xw (max-width: 600px) {
  .swd { padding: 50px 12px 0; }
  .swd .wgr { font-size: 13.5px; padding: 9px 14px; }
  .swd .wgt { font-size: 13px; }
}

/* ---------- Dashboard: the number climbs, the line draws, today lights up ---------- */
.sdb-card { width: 760px; padding: 28px 30px 26px; border-color: transparent; }
.sdb-top { font-size: 14px; color: var(--muted); }
.sdb-range { display: flex; padding: 3px; border-radius: 999px; background: #f4f4f5; }
.sdb-range i { height: 26px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.sdb-range i.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); }
.sdb-chart { position: relative; margin-top: 4px; }
.sdb-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.sdb-grid { fill: none; stroke: #f0f0f2; stroke-width: 1; }
.sdb-area { fill: url(#sdbG); }
.sdb-ln { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sdb-dot { fill: #fff; stroke: var(--blue); stroke-width: 2.4; }
.sdb-halo { fill: rgba(2, 133, 255, .14); opacity: 0; transform-box: fill-box; transform-origin: center; }
.sdb.done .sdb-halo { animation: whalo 1.8s ease-out infinite; }
@keyframes whalo { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }
.sdb-tip { position: absolute; left: 100%; top: 0; padding: 7px 11px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; white-space: nowrap; opacity: 0; transform: translate(-92%, calc(-100% - 10px)) translateY(6px); transition: opacity .35s ease, transform .5s var(--ease); pointer-events: none; }
.sdb-tip b { font-weight: 600; }
.sdb.done .sdb-tip { opacity: 1; transform: translate(-92%, calc(-100% - 10px)); }
.sdb-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.sdb-kpis span { display: grid; gap: 4px; }
.sdb-kpis span + span { padding-left: 20px; border-left: 1px solid var(--line-soft); }
.sdb-kpis small { font-size: 12.5px; color: var(--muted); }
.sdb-kpis b { font-size: 24px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
@container xw (max-width: 600px) {
  .sdb-card { width: 100%; padding: 22px 18px 20px; }
  .sdb-range { display: none; }
  .sdb-kpis span + span { padding-left: 12px; }
  .sdb-kpis small { font-size: 11px; }
  .sdb-kpis b { font-size: 19px; }
}

/* ---------- Business hero: certificate centered, a little lighter ---------- */
.cert-main small + h4 + small { display: none; }

@media (prefers-reduced-motion: reduce) {
  .xn-body [data-a], .xn-body .xt, .xn-body .sw-i { opacity: 1; }
  .rvc-chk { display: none; }
  .rvc-chip .rvc-v { opacity: 1; }
  .go .rvc-new, .go .rvc-old, .go .rvc-new .rvc-m > span, .go .sw-i, .rvc-chk i, .sdb.done .sdb-halo { animation: none !important; }
}

/* Bigger on desktop: the stage has room */
@container xw (min-width: 601px) {
  .tap-x { transform: scale(1.22); transform-origin: 50% 0; }
  .swd-in { transform: scale(1.32); transform-origin: 50% 0; }
}
.swd-in { display: flex; flex-wrap: wrap; justify-content: center; align-content: start; gap: 16px 14px; width: 860px; }
@container xw (max-width: 600px) { .swd-in { width: 100%; gap: 12px 10px; } }
.mo-cm[data-demo="cert"] { width: min(600px, 88%); }
.cert-row em { display: none; }
.cert-main { padding-bottom: 30px !important; }
.mo-cm .cert { box-shadow: 0 0 0 1px rgba(10, 10, 10, .07); }

/* ==========================================================================
   v10. The badge starts in the center. When tapped, it makes room and the
   badge and card settle together in the center.
   ========================================================================== */
/* Hero: badge centered; on tap it slides down and the card rises above it */
.tap .wbw { left: 50%; bottom: 22px; transform: translate(-50%, -152px); transition: transform .85s var(--ease); }
.tap.open .wbw { transform: translate(-50%, 0); }
.tap .wc { transform: translateY(60px) scale(.94); transition: opacity .45s ease .12s, transform .85s var(--ease) .05s; }
.tap.open .wc { transform: none; }

/* Badge pane: badge centered; on tap it slides left and the card opens on its right */
.tap-x { width: 680px; height: 340px; }
.tap-x .wbw { left: 50%; top: 142px; bottom: auto; transform: translateX(-50%); transition: left .85s var(--ease), transform .85s var(--ease); }
.tap-x.open .wbw { left: 0; transform: none; }
.tap-x .wc { left: auto; right: 0; top: 34px; bottom: auto; transform: translateX(-60px) scale(.94); transform-origin: 0 50%; }
.tap-x.open .wc { transform: none; }
.go .tap-x.pop .wbw { animation: none; }
.go .tap-x.pop .wb { animation: xpop .6s cubic-bezier(.3, 1.5, .5, 1) backwards .35s; }
@container xw (max-width: 600px) {
  .tap-x { width: 360px; height: 420px; }
  .tap-x .wbw, .tap-x.open .wbw { left: 50%; top: auto; bottom: 26px; }
  .tap-x .wbw { transform: translate(-50%, -158px); }
  .tap-x.open .wbw { transform: translate(-50%, 0); }
  .tap-x .wc { left: 10px; right: 10px; top: 20px; transform: translateY(60px) scale(.94); transform-origin: 50% 100%; }
}
@media (prefers-reduced-motion: reduce) { .tap .wbw, .tap .wc, .tap-x .wbw { transition: none !important; } }

/* v11. The Badge tab plays exactly like the hero: centered, the card rises above the badge */
.tpane { padding-top: 46px; }
@container xw (min-width: 601px) { .tap-p { transform: scale(1.25); transform-origin: 50% 0; } }
@container xw (max-width: 600px) { .tpane { padding-top: 40px; } .tap-p { transform: scale(.88); transform-origin: 50% 0; } }
.go .tap-p.pop .wb { animation: xpop .6s cubic-bezier(.3, 1.5, .5, 1) backwards .35s; }

/* v12. Badge tab: the badge waits right under the title, where it is seen without scrolling.
   On tap it slides down to make room, then the card appears above it. */
.tpane { padding-top: 8px; }
.tap-p .wbw { transform: translate(-50%, -296px); }
.tap-p.open .wbw { transform: translate(-50%, 0); }
.tap-p .wc { transform: translateY(24px) scale(.96); transition: opacity .45s ease .38s, transform .8s var(--ease) .32s; }
.tap-p.open .wc { transform: none; }
@container xw (max-width: 600px) { .tpane { padding-top: 16px; } }
@container xw (min-width: 601px) { .tap-p { transform: scale(1.12); } }

/* v13. Badge tab always centered, whatever the width */
.tpane { position: relative; }
.tap-p { position: absolute; left: 50%; margin-left: -210px; }
/* Horizontal carousels on phones: cards are shown at once, no vertical drift while swiping */
@media (max-width: 900px) {
  .cards-3 { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  .cards-3 > .reveal, .track > .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ==========================================================================
   v10. New interactive sections. Every media is an empty slot: drop an
   <img> or <video> inside .slot and the label disappears.
   ========================================================================== */

/* Badge tab: the badge a touch bigger, still centered */
.wbs { position: relative; display: inline-flex; scale: 1.12; }

/* ---------- How certification works: three steps on one line ---------- */
.steps3 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 34px; }
.st3-line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.st3-line i { display: block; height: 100%; width: 0; background: var(--ink); }
.steps3.go .st3-line i { width: 100%; transition: width 1.8s var(--ease) .2s; }
.st3 { position: relative; display: grid; gap: 10px; align-content: start; }
.st3-dot { position: absolute; left: 0; top: -34px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.st3-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background-color .4s ease; transition-delay: calc(var(--k, 0) * 600ms + 300ms); }
.steps3.go .st3-dot i { background: var(--blue); }
.st3-m { aspect-ratio: 4 / 5; margin-bottom: 8px; }
.st3-n { position: absolute; left: 16px; top: 16px; z-index: 2; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--mono); font-size: 12px; display: inline-flex; align-items: center; color: var(--ink); }
.st3-t { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.028em; line-height: 1.12; }
.st3-p { font-size: 16px; color: var(--muted); }
@media (max-width: 860px) {
  .steps3 { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 0 0 0 30px; }
  .st3-line { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .st3-line i { width: 100% !important; height: 0; }
  .steps3.go .st3-line i { height: 100%; transition: height 1.8s var(--ease) .2s; }
  .st3-dot { left: -30px; top: 0; }
  .st3-m { aspect-ratio: 4 / 3.4; }
}

/* ---------- Welo Page: three phone images, cut by the panel ---------- */
.phs { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-media); isolation: isolate; background: var(--soft-2); }
.phs-bg { z-index: -1; }
.phs-bg::after { top: 16px; bottom: auto; }
.phs-in { position: absolute; inset: 0; }
.phs-p { position: absolute; bottom: 0; aspect-ratio: 9 / 18.5; overflow: hidden; border-radius: 44px 44px 0 0; }
.phs-p .slot { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .06); border-radius: inherit; }
.phs-p .slot::after { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); white-space: nowrap; }
.phs-c { left: 50%; width: 27%; height: 88%; aspect-ratio: auto; transform: translateX(-50%); z-index: 2; }
.phs-l, .phs-r { width: 23%; height: 74%; aspect-ratio: auto; }
.phs-l { left: 12%; } .phs-r { right: 12%; }
@media (max-width: 760px) {
  .phs { aspect-ratio: 4 / 4.4; }
  .phs-l, .phs-r { display: none; }
  .phs-c { width: 64%; height: 88%; border-radius: 36px 36px 0 0; }
}

/* ---------- Claims vs proof ---------- */
.pf { max-width: 720px; margin: 0 auto; display: grid; justify-items: center; gap: 28px; }
.pf-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--soft); }
.pf-seg button { position: relative; z-index: 1; height: 40px; padding: 1px 18px 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); transition: color .3s ease; }
.pf-seg button .seal { width: 16px; height: 16px; }
.pf-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: var(--kw, 160px); border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); transform: translateX(var(--kx, 0px)); transition: transform .55s var(--ease), width .55s var(--ease); }
.pf[data-state="0"] .pf-seg button[data-side="0"], .pf[data-state="1"] .pf-seg button[data-side="1"] { color: var(--ink); }
.pf-list { width: 100%; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 6px 26px; }
.pf-list li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 76px; border-top: 1px solid var(--line-soft); }
.pf-list li:first-child { border-top: 0; }
.pf-list li > .wi { width: 20px; height: 20px; color: rgba(10, 10, 10, .45); }
.pf-a, .pf-b { grid-column: 2; grid-row: 1; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.02em; transition: opacity .45s ease, transform .6s var(--ease), filter .45s ease; transition-delay: calc(var(--k, 0) * 90ms); }
.pf-a { color: var(--muted); }
.pf-b { color: var(--ink); font-weight: 500; opacity: 0; transform: translateY(10px); filter: blur(4px); }
.pf[data-state="1"] .pf-a { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
.pf[data-state="1"] .pf-b { opacity: 1; transform: none; filter: none; }
.pf-s { display: grid; justify-items: end; }
.pf-s > * { grid-area: 1 / 1; transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--k, 0) * 90ms + 120ms); }
.pf-sa { font-size: 13px; color: var(--faint); }
.pf-sb { opacity: 0; transform: scale(.4); }
.pf[data-state="1"] .pf-sa { opacity: 0; }
.pf[data-state="1"] .pf-sb { opacity: 1; transform: none; }
.pf-s .xt { opacity: 1; animation: none; }
@media (max-width: 560px) {
  .pf-seg button { padding: 1px 13px 0; font-size: 14px; }
  .pf-list { padding: 4px 18px; }
  .pf-list li { gap: 12px; height: 68px; }
}

/* ---------- Accordion with media ---------- */
.acc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: center; }
.acc-list { grid-column: 1 / span 5; display: grid; }
.acc-m { grid-column: 7 / span 6; aspect-ratio: 4 / 5; }
.acc-m > .panes, .ftabs-m > .panes { position: absolute; inset: 0; }
.acc-m > .panes > [data-i], .ftabs-m > .panes > [data-i] { position: relative; height: 100%; }
.acc-i { display: grid; gap: 0; width: 100%; padding: 22px 0; border-top: 1px solid var(--line); text-align: left; color: var(--faint); transition: color .3s ease; }
.acc-i:last-child { border-bottom: 1px solid var(--line); }
.acc-i:hover, .acc-i.is-on { color: var(--ink); }
.acc-t { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.028em; line-height: 1.12; }
.acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc-b > span { min-height: 0; overflow: hidden; display: grid; gap: 16px; }
.acc-i.is-on .acc-b { grid-template-rows: 1fr; }
.acc-x { padding-top: 12px; max-width: 46ch; font-size: 16px; line-height: 1.42; color: var(--muted); }
.acc-bar { display: block; height: 2px; border-radius: 2px; background: var(--line-soft); overflow: hidden; position: relative; }
.acc-bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.is-paused .acc-bar::after { opacity: .3; }
@media (max-width: 900px) {
  .acc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .acc-list, .acc-m { grid-column: 1 / -1; }
  .acc-m { aspect-ratio: 4 / 3.4; order: -1; }
}

/* ---------- Tabs over one big media ---------- */
.ftabs { display: grid; justify-items: center; gap: 20px; }
.ftabs-m { width: 100%; }
.ftabs-c { max-width: 520px; text-align: center; font-size: 18px; line-height: 1.42; color: var(--muted); }
@media (max-width: 760px) { .ftabs .ptabs { gap: 2px; } .ftabs .ptab { font-size: 15px; padding: 1px 12px 0; } .ftabs-c { font-size: 16px; } }

/* ---------- Horizontal cards with arrows ---------- */
.sl-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
.sl-track::-webkit-scrollbar { display: none; }
.sl-card { flex: none; width: clamp(260px, 26vw, 380px); scroll-snap-align: start; display: grid; gap: 16px; }
.sl-card > .slot { position: relative; inset: auto; aspect-ratio: 4 / 5; border-radius: var(--r-media); }
.sl-txt { display: grid; gap: 4px; }
.sl-txt h3 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.sl-txt p { font-size: 16px; color: var(--muted); max-width: 34ch; }
.sl-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.sl-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); color: var(--ink); display: grid; place-items: center; transition: background-color .25s ease, opacity .25s ease; }
.sl-btn:hover { background: #e9e9eb; }
.sl-btn:disabled { opacity: .35; cursor: default; }
.sl-btn .icon { width: 16px; height: 16px; }
@media (max-width: 760px) { .sl-track { gap: 12px; } .sl-card { width: 78%; } }

@media (prefers-reduced-motion: reduce) {
  .steps3 .st3-line i { width: 100%; transition: none !important; }
  .st3-dot i { background: var(--blue); transition: none; }
  .pf-a, .pf-b, .pf-s > *, .pf-knob, .acc-b { transition: none !important; }
}

/* ==========================================================================
   v11. Full-bleed quote, media panel with a Welo list, full-bleed headline.
   The slots are dark until an image or video goes in.
   ========================================================================== */

/* ---------- Full-bleed quote ---------- */
.bq { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(520px, 44vw, 720px); margin-block: clamp(72px, 8vw, 128px); display: flex; align-items: center; color: #fff; }
.bq > .slot { z-index: -2; }
.bq::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 10, .5), rgba(10, 10, 10, 0) 62%); pointer-events: none; }
.bq-in { display: grid; gap: clamp(40px, 6vw, 96px); }
.bq-q { max-width: 30ch; font-size: clamp(22px, 2.1vw, 30px); font-weight: 500; letter-spacing: -.024em; line-height: 1.25; text-wrap: balance; text-indent: -.42em; }
.bq-by { display: grid; gap: 2px; font-size: 16px; }
.bq-by b { font-weight: 400; }
.bq-by span { color: rgba(255, 255, 255, .62); }
@media (max-width: 760px) { .bq { min-height: 560px; align-items: flex-end; padding-bottom: 40px; } .bq::before { background: linear-gradient(0deg, rgba(10, 10, 10, .6), rgba(10, 10, 10, 0) 70%); } }

/* ---------- Media panel with a Welo list ---------- */
.mfx { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-media); aspect-ratio: 16 / 7.4; min-height: 520px; color: #fff; }
.mfx > .slot { z-index: -2; }
.mfx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(10, 10, 10, .45), rgba(10, 10, 10, 0) 60%); pointer-events: none; }
.mfx-card { position: absolute; left: 8%; top: 50%; width: min(460px, 40%); transform: translateY(-50%); padding: 8px 10px; border-radius: 22px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.mfx-card li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 14px 12px; border-top: 1px solid rgba(10, 10, 10, .06); }
.mfx-card li:first-child { border-top: 0; }
.mfx-card li b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.015em; }
.mfx-card li small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.mfx-card li > .icon { width: 18px; height: 18px; stroke-width: 2; }
.mfx-card li:not(.on) { opacity: .78; }
.mfx-ic { width: 34px; height: 34px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .06); display: grid; place-items: center; }
.mfx-ic .wi { width: 16px; height: 16px; }
.mfx-ic > svg:not(.wi) { width: 18px; height: 18px; fill: var(--ink); }
.mfx-logo img { width: 22px; height: 22px; }
.mfx-txt { position: absolute; right: 7%; top: 50%; width: min(520px, 38%); transform: translateY(-50%); display: grid; gap: 14px; }
.mfx-e { font-size: 16px; font-weight: 500; }
.mfx-txt p { font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.028em; line-height: 1.14; text-wrap: balance; }
@media (max-width: 900px) {
  .mfx { aspect-ratio: auto; min-height: 0; display: grid; gap: 28px; padding: 36px 20px 20px; }
  .mfx::before { background: linear-gradient(180deg, rgba(10, 10, 10, .45), rgba(10, 10, 10, 0) 55%); }
  .mfx-txt, .mfx-card { position: relative; left: auto; right: auto; top: auto; width: auto; transform: none; }
  .mfx-txt p { font-size: 26px; }
  .mfx-card { order: 2; }
}

/* ---------- Full-bleed headline ---------- */
.fbh { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(560px, 50vw, 820px); margin-block: clamp(72px, 8vw, 128px); display: flex; align-items: flex-end; padding-bottom: clamp(40px, 4vw, 64px); color: #fff; }
.fbh > .slot { z-index: -2; }
.fbh > .slot::after { right: 16px; bottom: 14px; }
.fbh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 10, 10, .5), rgba(10, 10, 10, 0) 55%); pointer-events: none; }
.fbh-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.fbh-main { display: grid; gap: 18px; justify-items: start; }
.fbh-t { max-width: 13ch; font-size: clamp(46px, 5.6vw, 84px); font-weight: 400; letter-spacing: -.042em; line-height: .98; text-wrap: balance; }
.fbh-p { font-size: 18px; color: rgba(255, 255, 255, .78); }
.fbh-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.fbh-soft { background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fbh-soft:hover { background: rgba(255, 255, 255, .24); }
.fbh-note { max-width: 30ch; font-size: 15px; line-height: 1.42; color: rgba(255, 255, 255, .72); margin-bottom: 44px; }
@media (max-width: 760px) { .fbh-in { flex-direction: column; align-items: flex-start; gap: 24px; } .fbh-note { margin-bottom: 0; } }
@media (max-width: 900px) { .mfx > .slot::after { top: 14px; bottom: auto; } }
/* Light photo: dark text, no scrim */
.fbh-light { color: var(--ink); }
.fbh-light::before { display: none; }
.fbh-light .fbh-p, .fbh-light .fbh-note { color: var(--muted); }
.fbh > .slot > img { object-position: 70% 50%; }
/* Shop cards: four white tiles with line icons */
.sl-tiles { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 52%; }
.sl-tiles i { aspect-ratio: 1; border-radius: 22%; background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .06); display: grid; place-items: center; }
.sl-tiles svg { width: 34%; height: 34%; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Full-bleed photo keeps its own proportions so it is never upscaled much */
.fbh-light { min-height: clamp(520px, 43.2vw, 860px); }
.fbh-light .fbh-note { display: none; }
/* Shop cards: a small Welo check plays on loop, rows tick one by one */
.sl-tiles { display: none; }
.sl-chk { position: absolute; left: 50%; top: 50%; width: 70%; transform: translate(-50%, -50%); padding: 6px 16px 8px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); color: var(--ink); text-align: left; }
.sl-chk-h { display: flex; align-items: center; gap: 7px; padding: 10px 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.sl-chk-h svg { width: 15px; height: 15px; fill: var(--ink); }
.sl-chk li { display: flex; align-items: center; justify-content: space-between; height: 42px; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.sl-chk li span:first-child { animation: slink 4.8s ease infinite; animation-delay: calc(var(--o, 0s) + var(--r) * .45s); }
.sl-chk .xt { opacity: 1; animation: sltick 4.8s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--o, 0s) + var(--r) * .45s); }
@keyframes sltick { 0%, 8% { transform: scale(0); opacity: 0; } 16%, 84% { transform: none; opacity: 1; } 94%, 100% { transform: scale(0); opacity: 0; } }
@keyframes slink { 0%, 8% { color: var(--faint); } 16%, 84% { color: var(--ink); } 94%, 100% { color: var(--faint); } }
@media (prefers-reduced-motion: reduce) { .sl-chk .xt, .sl-chk li span:first-child { animation: none; } }

/* Trust you can check, on phones: warm white panel, copy on top, the phone below */
.fbh-phone { display: none; }
@media (max-width: 760px) {
  .fbh-light { display: block; min-height: 0; padding: 44px 0 0; background: #f5f4f2; overflow: hidden; }
  .fbh-light > .slot { display: none; }
  .fbh-light .fbh-in { gap: 22px; }
  .fbh-light .fbh-t { font-size: 54px; }
  .fbh-light .fbh-p { font-size: 18px; color: rgba(10, 10, 10, .72); }
  .fbh-light .fbh-a .btn:first-child { background: #fff; color: var(--ink); }
  .fbh-light .fbh-a .btn-soft { background: #dcdad6; color: var(--ink); }
  .fbh-light .fbh-note { display: block; color: rgba(10, 10, 10, .62); }
  .fbh-phone { display: block; width: 88%; max-width: 420px; margin: 36px auto -2px; }
}
/* Shop cards: static, every row already checked */
.sl-chk .xt { animation: none !important; opacity: 1; transform: none; color: #fff; }
.sl-chk li span:first-child { animation: none !important; color: var(--ink); }
/* Final CTA: desktop 16:9, phone 4:5 with its own image */
.cta-m picture, .cta-m picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .cta-m { aspect-ratio: 1432 / 1790; } }
/* Client pictures fill their media */
.pic-m picture, .pic-m picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ftabs-m .slot img { object-fit: cover; object-position: 50% 0; }
.st3-dot { display: none; }
.steps3 { padding-top: 0; }
/* Soft animated gradient: three blurred colour fields drifting slowly */
.aur { overflow: hidden; background: #dfeefe; }
.aur i { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .9; will-change: transform; }
.aur i:nth-child(1) { left: -12%; top: -18%; animation: aur1 14s ease-in-out infinite alternate; }
.aur i:nth-child(2) { right: -16%; top: 10%; animation: aur2 17s ease-in-out infinite alternate; }
.aur i:nth-child(3) { left: 18%; bottom: -30%; animation: aur3 20s ease-in-out infinite alternate; }
.aur-b { background: #d7e9ff; }
.aur-b i:nth-child(1) { background: #7fbfff; } .aur-b i:nth-child(2) { background: #b8dcff; } .aur-b i:nth-child(3) { background: #4ea6ff; }
.aur-g { background: #f3eedc; }
.aur-g i:nth-child(1) { background: #eadca6; } .aur-g i:nth-child(2) { background: #f7f1dd; } .aur-g i:nth-child(3) { background: #ddc983; }
@keyframes aur1 { to { transform: translate(28%, 22%) scale(1.15); } }
@keyframes aur2 { to { transform: translate(-30%, 18%) scale(.9); } }
@keyframes aur3 { to { transform: translate(14%, -26%) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .aur i { animation: none; } }

/* Earn the badge on phones: dark panel, the badge opens and closes above the title */
.fbh-badge { display: none; }
@media (max-width: 760px) {
  .fbh:not(.fbh-light) { min-height: 0; padding-top: 72px; background: #1c1c1e; }
  .fbh:not(.fbh-light) > .slot, .fbh:not(.fbh-light)::before { display: none; }
  .fbh-badge { display: block; position: relative; height: 56px; margin-bottom: 28px; }
  .fbh-badge .wbw { left: 0; bottom: auto; top: 0; }
  .fbh:not(.fbh-light) .fbh-note { display: block; }
}

/* ---------- v12 ---------- */
/* Gradients: wider, livelier drift, still soft */
.aur i { width: 85%; filter: blur(54px); opacity: 1; }
.aur i:nth-child(1) { animation: aur1 9s ease-in-out infinite alternate; }
.aur i:nth-child(2) { animation: aur2 11s ease-in-out infinite alternate; }
.aur i:nth-child(3) { animation: aur3 13s ease-in-out infinite alternate; }
@keyframes aur1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(38%, 18%) scale(1.25); } 100% { transform: translate(12%, 42%) scale(.95); } }
@keyframes aur2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-42%, 30%) scale(.85); } 100% { transform: translate(-18%, -12%) scale(1.2); } }
@keyframes aur3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(26%, -40%) scale(1.3); } 100% { transform: translate(-20%, -18%) scale(1); } }
.aur-b { background: #cfe4ff; }
.aur-b i:nth-child(1) { background: #6fb6ff; } .aur-b i:nth-child(2) { background: #c9e6ff; } .aur-b i:nth-child(3) { background: #2f93ff; }
.aur-g i:nth-child(1) { background: #e6d391; } .aur-g i:nth-child(2) { background: #faf5e4; } .aur-g i:nth-child(3) { background: #d4bc6a; }
.aur-k { background: #0a0a0a; }
.aur-k i { filter: blur(70px); }
.aur-k i:nth-child(1) { background: #000; } .aur-k i:nth-child(2) { background: #2b2b2e; } .aur-k i:nth-child(3) { background: #474749; }
/* Seals: a light shadow only */
.seal-stage .seal { filter: drop-shadow(0 8px 14px rgba(10, 10, 10, .1)); }

/* Earn the badge on desktop: dark text, no scrim */
.fbh-ink { color: var(--ink); }
.fbh-ink::before { display: none; }
.fbh-ink .fbh-p, .fbh-ink .fbh-note { color: rgba(10, 10, 10, .62); }
.fbh-ink .fbh-a .btn-white { background: var(--btn); color: #fff; }
.fbh-ink .fbh-soft { background: rgba(10, 10, 10, .06); color: var(--ink); }
@media (max-width: 760px) {
  .fbh-ink { color: #fff; }
  .fbh-ink .fbh-p, .fbh-ink .fbh-note { color: rgba(255, 255, 255, .72); }
  .fbh-ink .fbh-a .btn-white { background: #fff; color: var(--ink); }
  .fbh-ink .fbh-soft { background: rgba(255, 255, 255, .16); color: #fff; }
}

/* Signature, written left to right when the quote comes into view */
.sig { display: block; width: 180px; aspect-ratio: 366 / 140; margin-bottom: 14px; background: #fff;
  -webkit-mask-size: contain, 260% 100%; mask-size: contain, 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center, 100% 0; mask-position: left center, 100% 0; -webkit-mask-composite: source-in; mask-composite: intersect; }
.bq.is-in .sig { animation: sigw 2.4s cubic-bezier(.45, .1, .3, 1) .5s both; }
@keyframes sigw { from { -webkit-mask-position: left center, 100% 0; mask-position: left center, 100% 0; } to { -webkit-mask-position: left center, 0 0; mask-position: left center, 0 0; } }
@media (prefers-reduced-motion: reduce) { .sig { -webkit-mask-position: left center, 0 0; mask-position: left center, 0 0; } }

/* Phones: taller step cards and Welo Page image */
@media (max-width: 860px) { .st3-m { aspect-ratio: 3 / 4; } }
@media (max-width: 760px) { .pic-m.ar-wide { aspect-ratio: 3 / 4; } }

/* ---------- v13 ---------- */
/* Earn the badge on desktop: the small note sat on the photo, it goes */
@media (min-width: 761px) { .fbh-ink .fbh-note { display: none; } }
/* Signature 25% smaller */
.sig { width: 135px; margin-bottom: 12px; }
/* Gradients drawn as radial fills, not blurred layers, so they stay crisp while they move */
.aur i { filter: none !important; will-change: auto; width: 110%; opacity: 1; }
.aur-b i:nth-child(1) { background: radial-gradient(closest-side, #6fb6ff, rgba(111, 182, 255, 0)); }
.aur-b i:nth-child(2) { background: radial-gradient(closest-side, #e3f1ff, rgba(227, 241, 255, 0)); }
.aur-b i:nth-child(3) { background: radial-gradient(closest-side, #2f93ff, rgba(47, 147, 255, 0)); }
.aur-g i:nth-child(1) { background: radial-gradient(closest-side, #e6d391, rgba(230, 211, 145, 0)); }
.aur-g i:nth-child(2) { background: radial-gradient(closest-side, #fdf9ec, rgba(253, 249, 236, 0)); }
.aur-g i:nth-child(3) { background: radial-gradient(closest-side, #d4bc6a, rgba(212, 188, 106, 0)); }
.aur-k i:nth-child(1) { background: radial-gradient(closest-side, #000, rgba(0, 0, 0, 0)); }
.aur-k i:nth-child(2) { background: radial-gradient(closest-side, #333336, rgba(51, 51, 54, 0)); }
.aur-k i:nth-child(3) { background: radial-gradient(closest-side, #4a4a4d, rgba(74, 74, 77, 0)); }
@keyframes aur1 { 0% { transform: translate(0, 0); } 50% { transform: translate(34%, 16%); } 100% { transform: translate(10%, 38%); } }
@keyframes aur2 { 0% { transform: translate(0, 0); } 50% { transform: translate(-38%, 26%); } 100% { transform: translate(-16%, -12%); } }
@keyframes aur3 { 0% { transform: translate(0, 0); } 50% { transform: translate(24%, -36%); } 100% { transform: translate(-18%, -16%); } }

/* ---------- v14: Earn the badge, all black ---------- */
.ebk { background: #000; color: #fff; padding-block: clamp(72px, 8vw, 128px); margin-block: clamp(72px, 8vw, 128px); overflow: hidden; }
.ebk-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.ebk-main { display: grid; justify-items: start; gap: 18px; }
.ebk .fbh-p { color: rgba(255, 255, 255, .72); }
.ebk .fbh-note { display: block; margin: 10px 0 0; color: rgba(255, 255, 255, .5); }
.ebk .fbh-a { margin-top: 8px; }
.ebk-badge { display: block !important; position: relative; height: 56px; margin-bottom: 10px; }
.ebk-badge .wbw { left: 0; top: 0; bottom: auto; }
.ebk-art img { width: 100%; max-width: 640px; margin-left: auto; display: block; }
@media (max-width: 760px) {
  .ebk-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ebk-art img { margin: 0 auto; max-width: 420px; }
}

/* Final CTA: moving blue field, the real badge in the middle */
.cta-aur { display: grid; place-items: center; }
.cta-badge { position: relative; z-index: 2; height: 56px; width: 320px; scale: 1.4; }
.cta-badge .wbw { left: 50%; top: 0; bottom: auto; transform: translateX(-50%); }
@media (max-width: 760px) { .cta-badge { scale: 1.1; } }

/* ==========================================================================
   v12. Navbar with dropdowns and language selector, mobile menu, footer.
   ========================================================================== */
.wn { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 transparent; transition: box-shadow .3s ease; }
.wn.is-scrolled, .wm-on .wn { box-shadow: 0 1px 0 var(--line); }
.wn-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.wn .brand { flex: none; }
.wn-main { display: flex; align-items: center; gap: 2px; }
.wn-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.wn-end .btn { margin-left: 6px; }
.wn-link, .wn-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 1px 12px 0; border-radius: 999px; font-size: 15px; color: var(--ink); white-space: nowrap; transition: background-color .2s ease; }
.wn-link:hover, .wn-btn:hover, .wn-dd.is-open > .wn-btn { background: rgba(10, 10, 10, .05); }
.wn-link[aria-current="page"] { background: rgba(10, 10, 10, .05); }
.wn-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: transform .3s var(--ease); }
.wn-dd.is-open .wn-chev, .wm-g.is-open .wn-chev { transform: rotate(180deg); }
.wn-btn .icon { width: 16px; height: 16px; opacity: .7; }

/* Dropdown panel */
.wn-dd { position: relative; }
.wn-panel { position: absolute; top: calc(100% + 10px); left: -12px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px; width: 640px; padding: 8px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .06), 0 18px 48px -12px rgba(10, 10, 10, .18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s ease, transform .3s var(--ease), visibility 0s linear .3s; }
.wn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.wn-dd.is-open > .wn-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .3s var(--ease); }
.wn-grid { display: grid; gap: 2px; align-content: start; }
.wn-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; transition: background-color .2s ease; }
.wn-item:hover { background: var(--soft); }
.wn-item b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.wn-item small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.38; color: var(--muted); }
.wn-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--soft); color: var(--ink); transition: background-color .2s ease, color .2s ease; }
.wn-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wn-item:hover .wn-ic { background: var(--ink); color: #fff; }
.wn-feat { display: grid; align-content: start; align-self: start; gap: 4px; padding: 6px 6px 8px; }
.wn-feat-m { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3.3; margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
.wn-feat-m i { transition: scale .8s var(--ease); }
.wn-feat:hover .wn-feat-m i { scale: 1.15; }
.wn-feat b::after { content: "→"; display: inline-block; margin-left: 6px; opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .35s var(--ease); }
.wn-feat:hover b::after { opacity: 1; transform: none; }
.wn-feat-b { position: relative; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px -6px rgba(10, 10, 10, .25); transition: transform .5s var(--ease); }
.wn-feat-b svg { width: 26px; height: 26px; fill: var(--blue); }
.aur-k .wn-feat-b { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.aur-k .wn-feat-b svg { fill: #fff; }
.wn-feat:hover .wn-feat-b { transform: scale(1.1); }
.aur-g .wn-feat-b svg { fill: #b8962e; }
.wn-new { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 1px 8px 0; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11.5px; font-style: normal; font-weight: 500; vertical-align: 2px; }
.wm-b .wn-new { margin-left: 0; }
.wn-feat b { font-size: 15px; font-weight: 500; color: var(--ink); padding-inline: 4px; }
.wn-feat small { font-size: 13.5px; line-height: 1.38; color: var(--muted); padding-inline: 4px; }

/* Language selector */
.wn-lpanel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 200px; left: auto; right: 0; padding: 6px; border-radius: 16px; }
.wn-lopt { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; color: var(--ink); transition: background-color .2s ease; }
.wn-lopt:hover { background: var(--soft); }
.wn-tick { width: 15px; height: 15px; color: var(--blue); opacity: 0; }
.wn-lopt[aria-current="true"] .wn-tick { opacity: 1; }
.wn-up .wn-lpanel { top: auto; bottom: calc(100% + 10px); transform: translateY(6px); }
.wn-up .wn-lpanel::before { top: auto; bottom: -12px; }
.wn-up.is-open .wn-lpanel { transform: none; }

/* Burger: three lines, no background */
.wn-burger { display: none; position: relative; width: 40px; height: 40px; margin-left: 2px; margin-right: -8px; background: none; }
.wn-burger i { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease), opacity .2s ease; }
.wn-burger i:nth-child(1) { top: 13px; } .wn-burger i:nth-child(2) { top: 19px; } .wn-burger i:nth-child(3) { top: 25px; }
.wm-on .wn-burger i:nth-child(1) { top: 19px; transform: rotate(45deg); }
.wm-on .wn-burger i:nth-child(2) { opacity: 0; }
.wm-on .wn-burger i:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile menu */
.wm { position: fixed; inset: 64px 0 0; z-index: 59; display: flex; flex-direction: column; gap: 24px; padding: 12px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 20px); background: #fff; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .35s var(--ease), visibility 0s linear .35s; }
.wm.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s var(--ease); }
.wm-nav { display: grid; }
.wm-big { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-align: left; }
.wm-h .wn-chev { width: 18px; height: 18px; }
.wm-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.wm-b > div { min-height: 0; overflow: hidden; display: grid; gap: 2px; }
.wm-g.is-open .wm-b { grid-template-rows: 1fr; }
.wm-g.is-open .wm-b > div { padding: 8px 0 12px; }
.wm-b a { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 16px; color: var(--ink); }
.wm-b .wn-ic { width: 32px; height: 32px; border-radius: 9px; }
.wm-b .wn-ic svg { width: 16px; height: 16px; }
.wm-foot { display: grid; gap: 16px; margin-top: auto; }
.wm-lang { display: inline-flex; align-items: center; gap: 4px; width: max-content; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--soft); }
.wm-lang .icon { width: 16px; height: 16px; opacity: .6; margin-right: 4px; }
.wm-lang a { height: 32px; padding: 1px 14px 0; border-radius: 999px; display: inline-flex; align-items: center; font-size: 14px; color: var(--muted); }
.wm-lang a[aria-current="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); }
.wm-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wm-cta .btn { height: 50px; font-size: 16px; }

@media (max-width: 1400px) { .wn-main .wn-link[href$="/news"] { display: none; } }
@media (max-width: 1280px) {
  .wn-main, .wn-login { display: none; }
  .wn-burger { display: block; }
}
@media (max-width: 420px) { .wn-end .btn { display: none; } }

/* ---------- Footer ---------- */
.wf { margin-top: clamp(72px, 8vw, 128px); padding-top: clamp(56px, 6vw, 88px); padding-bottom: 12px; border-top: 1px solid var(--line); overflow: hidden; }
.wf-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: end; padding-bottom: clamp(48px, 5vw, 72px); }
.wf-brand { display: grid; justify-items: start; gap: 14px; }
.wf-t { font-size: clamp(32px, 3.4vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; margin-top: 18px; }
.wf-p { max-width: 40ch; font-size: 16px; color: var(--muted); }
.wf-form { display: grid; gap: 10px; }
.wf-form label { font-size: 15px; font-weight: 500; }
.wf-field { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s ease, background-color .2s ease; }
.wf-field:focus-within { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.wf-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.wf-field input::placeholder { color: var(--faint); }
.wf-field .btn { height: 38px; }
.wf-msg { font-size: 13px; color: var(--muted); }
.wf-form.is-err .wf-field { box-shadow: inset 0 0 0 1px #d93025; }
.wf-form.is-err .wf-msg { color: #d93025; }
.wf-form.is-ok .wf-msg { color: var(--ink); }
.wf-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding-block: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line-soft); }
.wf-col h3 { font-size: 14px; font-weight: 500; color: var(--faint); margin-bottom: 14px; }
.wf-col ul { display: grid; gap: 10px; }
.wf-col a { font-size: 15px; color: var(--ink); transition: color .2s ease; }
.wf-col a:hover { color: var(--blue); }
.wf-col em { font-style: normal; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--soft); font-size: 11.5px; color: var(--muted); vertical-align: 1px; }
.wf-bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--muted); }
.wf-end { display: flex; align-items: center; gap: 12px; }
.wf-end .wn-btn { font-size: 14px; color: var(--muted); }
.wf-soc { display: flex; gap: 4px; }
.wf-soc a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); transition: background-color .2s ease; }
.wf-soc a:hover { background: var(--soft); }
.wf-soc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wf-mark { display: flex; align-items: center; justify-content: center; gap: .1em; margin-bottom: -.2em; font-size: clamp(96px, 21vw, 340px); font-weight: 500; letter-spacing: -.07em; line-height: .9; color: var(--ink); user-select: none; }
.wf-mark svg { width: .72em; height: .72em; fill: var(--ink); flex: none; }
@media (max-width: 860px) {
  .wf-top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .wf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .wf-bot { flex-direction: column-reverse; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .wn-panel, .wm, .wm-b, .wn-burger i, .wn-chev { transition: none !important; } }

/* Panel: aspect-ratio + min-height must not widen the box */
.mfx { width: 100%; }
.sl-bg .sl-card > .slot { background: url(/site/assets/redesign/images/2df4a5db810b5b3d45ee.webp) center / cover; }
.sl-bg .sl-card > .slot::after { display: none; }