/* GENERATED by dev/build-r38 — Pricing page-scoped rules (src/ui/pricingPageCss.js, verbatim legacy helmet). */
/* ════════════════════════════════════════════════════════════════════════════
v12 FLUID SCALE — this block is byte-identical on all five pages.
Every size ramps between a 1024px floor and a 1600px ceiling, so nothing
wraps, collides, overflows or clips when the viewport is narrower than the
1366 design width. Never hard-code a size that appears here.
════════════════════════════════════════════════════════════════════════════ */
:root{
/* page rhythm */
--fl-inset: clamp(20px, 5.2vw, 112px);
--fl-sec: clamp(40px, 4.6vw, 80px);
--fl-hero-pad: clamp(20px, 4.4vw, 90px);
/* header pill */
/* v15 §A.3 — logo sizes are integers on purpose. A vw-driven height lands the glyph
edges on fractional pixels and that is what makes the wordmark look rough.
24 / 28 / 42 are 1:1, 1:1 and exactly 1.5x of the shipped assets.
The logo must never exceed the CTA beside it (44px) — 24 and 28 both clear it. */
--fl-logo: 28px; /* hero pill — logo-lockup.svg, 1:1 (same as sticky) */
--fl-logo-sticky: 28px; /* sticky bar — logo-lockup.svg, 1:1 */
--fl-logo-reg: 42px; /* registration — logo-lockup.svg, 1.5x */
--fl-bico: clamp(14px, 1.38vw, 22px);
--fl-btxt: clamp(9.5px, 0.92vw, 13.5px);
--fl-bsub: clamp(8px, 0.7vw, 10px);
--fl-pill-pad: clamp(12px, 1.8vw, 40px);
--fl-pill-gap: clamp(8px, 0.95vw, 20px);
--fl-badge-gap: clamp(16px, 2.4vw, 34px);
/* one CTA scale for every button on every page */
--fl-cta-h: clamp(44px, 3.7vw, 60px);
--fl-cta-hs: clamp(44px, 3.05vw, 48px);
--fl-cta-txt: clamp(11.5px, 1.05vw, 16px);
--fl-cta-txts: clamp(11px, 0.97vw, 15px);
--fl-cta-pad: clamp(14px, 1.75vw, 28px);
/* trust widget — avatars, counter, stars, score, caption scale as one unit */
--fl-av: clamp(27px, 2.5vw, 40px);
--fl-av-lap: clamp(8px, 0.78vw, 12px);
--fl-more-w: clamp(31px, 2.85vw, 45px);
--fl-more-txt: clamp(9px, 0.8vw, 13px);
--fl-star: clamp(12px, 1.1vw, 17px);
--fl-score: clamp(12px, 1.08vw, 16px);
--fl-cap: clamp(10px, 0.9vw, 13px);
--fl-trust-h: clamp(52px, 4.9vw, 72px);
--fl-trust-pad: clamp(10px, 1.2vw, 20px);
--fl-trust-gap: clamp(8px, 1vw, 16px);
/* reviews carousel */
--fl-revgap: clamp(14px, 2vw, 32px);
--fl-cstar: clamp(10px, 0.95vw, 13px);
/* registration — the two step pages scale by HEIGHT as well as width */
--fl-reg-logo: clamp(30px, 5.2vh, 56px);
--fl-reg-gap1: clamp(14px, 4vh, 52px);
--fl-reg-gap2: clamp(18px, 5.6vh, 72px);
--fl-reg-gap3: clamp(10px, 1.9vh, 16px);
--fl-reg-gap4: clamp(16px, 3.6vh, 36px);
--fl-reg-h1: clamp(19px, 3vh, 28px);
--fl-reg-body: clamp(13px, 1.8vh, 16px);
--fl-reg-field: clamp(44px, 6.4vh, 60px);
--fl-reg-small: clamp(11px, 1.5vh, 13px);
--fl-reg-quote: clamp(15px, 2.6vh, 24px);
--fl-reg-pad-y: clamp(24px, 7.2vh, 72px);
--fl-reg-pad-x: clamp(20px, 3.6vw, 64px);
--fl-regav: clamp(34px, 5vh, 48px);
/* images and icons — ![]()
sizes ramp like everything else */
--fl-heromark: clamp(32px, 3.6vw, 52px);
--fl-aimark: clamp(34px, 3.9vw, 56px);
--fl-featico: clamp(20px, 2vw, 28px);
--fl-portrait: clamp(88px, 10vw, 138px);
--fl-wordmark: clamp(74px, 7.4vw, 102px);
--fl-uiico: clamp(18px, 1.75vw, 24px);
--fl-uiico20: clamp(15px, 1.5vw, 20px);
--fl-uiico-sm: clamp(14px, 1.4vw, 18px);
--fl-uiico-xs: clamp(12px, 1.2vw, 16px);
--fl-dot: clamp(9px, 0.95vw, 12px);
--fl-arrow: clamp(26px, 2.4vw, 32px);
--fl-avsm: clamp(28px, 2.7vw, 36px);
--fl-avmd: clamp(34px, 3vw, 44px);
--fl-marquee-w: clamp(80px, 8.4vw, 120px);
/* one type scale — every body, label and heading size on every page */
--fl-t11: clamp(9px, 0.78vw, 11px);
--fl-t12: clamp(9.5px, 0.85vw, 12px);
--fl-t13: clamp(10.5px, 0.92vw, 13px);
--fl-t14: clamp(11px, 1vw, 14px);
--fl-t15: clamp(11.5px, 1.05vw, 15px);
--fl-t16: clamp(12px, 1.12vw, 16px);
--fl-t17: clamp(12.5px, 1.18vw, 17px);
--fl-t18: clamp(13px, 1.26vw, 18px);
--fl-t19: clamp(13.5px, 1.34vw, 19px);
--fl-t20: clamp(14px, 1.42vw, 20px);
--fl-t22: clamp(15px, 1.55vw, 22px);
--fl-t24: clamp(16px, 1.7vw, 24px);
--fl-t26: clamp(17px, 1.85vw, 26px);
--fl-t28: clamp(18px, 1.95vw, 28px);
--fl-t32: clamp(20px, 2.25vw, 32px);
/* r18 — skeleton-only line boxes. Derived from the same expressions the real text uses,
so the skeleton and the real content cannot drift apart across 1280-1920. */
--sk-h1line: calc(clamp(38px, 3.9vw, 56px) * 1.1);
--sk-leadline: calc(var(--fl-t19) * 1.5);
--sk-t18line: calc(var(--fl-t18) * 1.5);
--fl-wordmark-h: clamp(17px, 1.75vw, 24px);
}
body { margin: 0; background: rgb(238,238,242); }
a { color: rgb(219,97,221); text-decoration: none; }
a:hover { color: rgb(240,114,205); }
.tt-wrap:hover .tt-popup, .tt-trigger:focus + .tt-popup { opacity: 1 !important; visibility: visible !important; }
/* H8 — tinted band so the white cards keep a visible edge */
/* reviews sit on the page, not in a tinted band — the band drew more attention than the
product itself, and its fill showed through the cards' rounded corners as a grey wedge */
.bl-reviews { padding:var(--fl-sec) var(--fl-inset) 0; margin:0 }
.bl-reviews .bl-card { background:#fff; border:1px solid #ECECEC; border-radius:20px; padding:32px }
@keyframes blFade { from { opacity:0 } to { opacity:1 } }
@keyframes blPop { from { opacity:0; transform:translateY(14px) scale(.96) } to { opacity:1; transform:none } }
@keyframes blFlow { 0% { background-position: 0% 50% } 100% { background-position: 300% 50% } }
@keyframes blSheen { 0% { transform: translateX(-100%) } 60%,100% { transform: translateX(100%) } }
@keyframes blClockSpin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes skShine { to { transform: translateX(100%) } }
/* G5 — top progress bar, animated while loading then settled */
.bl-bar { position:fixed; top:0; left:0; right:0; height:8px; background:#F3EFF6; z-index:9999; transition:height .45s cubic-bezier(.22,.61,.36,1) }
.bl-bar__fill { height:100%; width:0; border-radius:0 6px 6px 0; transition:width .3s cubic-bezier(.22,.61,.36,1); background:linear-gradient(90deg,#DB61DD,#F8929A,#F48FA4,#F072CD,#DB61DD); background-size:300% 100%; animation:blFlow 3.2s linear infinite; box-shadow:0 1px 10px rgba(240,114,205,.55) }
.bl-bar.is-done { height:3px; background:transparent }
.bl-bar.is-done .bl-bar__fill { animation:blBarDone .5s ease-out forwards; box-shadow:none; border-radius:0; background:linear-gradient(90deg,#DB61DD,#F8929A,#F48FA4,#F072CD) }
/* G6 — sticky header hidden on first paint by CSS, never by JS */
.bl-sticky { position:fixed; top:0; left:0; right:0; z-index:9000; background:#FFFFFF; border-bottom:1px solid #ECECEC; box-shadow:0 4px 18px rgba(22,14,40,.06); transform:translateY(-130%); transition:transform .3s ease }
.bl-sticky.is-visible { transform:translateY(0) }
/* r3 §3.3 — sticky nav: Login is a real control (ghost pill), Pricing stays a quiet text link
with a 44px hit box. One identical block on all five pages. */
.bl-stickynav { display:inline-flex; align-items:center; min-height:44px; padding:0 clamp(6px,0.6vw,10px); font-size:var(--fl-t15); font-weight:600; color:#4A4453; text-decoration:none; white-space:nowrap; border-radius:10px; transition:color .18s ease, background .18s ease }
.bl-stickynav:hover { color:#160E28; background:#F6F3F8 }
.bl-stickynav:focus-visible { outline:3px solid #DB61DD; outline-offset:2px }
/* C4 — the clock: dial asset carries no hands, both hands are live DOM */
.bl-clock { position:relative; display:inline-flex; width:var(--fl-arrow); height:var(--fl-arrow); flex-shrink:0 }
.bl-clock__dial { width:var(--fl-arrow); height:var(--fl-arrow); display:block }
.bl-clock__hand { position:absolute; left:50%; top:50%; background:#E16AD2; border-radius:2px; transform-origin:50% 100%; pointer-events:none }
.bl-clock__hand--min { width:2px; height:8.5px; margin-left:-1px; margin-top:-8.5px; animation:blClockSpin 72s linear infinite }
.bl-clock__hand--sec { width:1.5px; height:11px; margin-left:-.75px; margin-top:-11px; opacity:.85; animation:blClockSpin 6s linear infinite }
/* G10 — avatar stack: counter always on top, meta text never re-rasterised */
/* v12 — the header pill is ONE component, identical on Home, Pricing and the sticky
reference. Every child scales with the viewport; the badge row never wraps and the
CTA is never clipped, because nothing in here carries a hard pixel size. */
.bl-badge__row { display:flex; align-items:center; gap:clamp(4px,.55vw,8px); min-width:0 }
/* v13 §1 — the sub-caption hangs below the row instead of stretching the badge box,
so all three badges have identical height and one shared icon/text baseline */
.bl-badge--stack { position:relative; display:flex; align-items:center; min-width:0 }
.bl-badge__txt { font-size:var(--fl-btxt); font-weight:700; color:#160E28; line-height:1.05; white-space:nowrap }
.bl-badge__sub { position:absolute; top:calc(100% + 2px); left:calc(var(--fl-bico) + clamp(4px,.55vw,8px)); font-size:var(--fl-bsub); font-weight:500; color:#474747; line-height:1.05; white-space:nowrap; pointer-events:none }
.bl-stack { display:flex; align-items:center; position:relative; flex-shrink:0 }
.bl-stack__a { width:var(--fl-av); height:var(--fl-av); border-radius:50%; object-fit:cover; border:2px solid #fff; box-sizing:border-box; cursor:pointer; position:relative; z-index:1; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease ; background:#EFEBF3 }
.bl-stack__a:not(:first-child) { margin-left:calc(var(--fl-av-lap) * -1) }
.bl-stack__a:hover, .bl-stack__a:active { will-change:transform; transform:translateY(-8px); box-shadow:0 10px 18px rgba(22,14,40,.18); z-index:2 }
.bl-stack__more { position:relative; z-index:3; width:var(--fl-more-w); height:var(--fl-av); margin-left:calc(var(--fl-av-lap) * -1); border-radius:calc(var(--fl-av) / 2); background:#160E28; border:2px solid #fff; box-sizing:border-box; color:#fff; font-size:var(--fl-more-txt); font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .22s cubic-bezier(.34,1.56,.64,1) }
.bl-stack__more:hover, .bl-stack__more:active { will-change:transform; transform:translateY(-8px) }
.bl-stack__meta { position:relative; z-index:1; min-width:0; transform:translateZ(0); backface-visibility:hidden }
.bl-stack__meta * { transition:none !important }
/* v12 — the rating widget is ONE component, identical on every page it appears on.
Only the four avatar filenames differ. It scales with the viewport as a unit. */
.bl-trust { width:fit-content; max-width:100%; min-height:var(--fl-trust-h); border-radius:calc(var(--fl-trust-h) / 2); background:#FFFFFF; display:flex; align-items:center; gap:var(--fl-trust-gap); padding:0 var(--fl-trust-pad); box-sizing:border-box }
.bl-trust--bare { background:transparent; min-height:0; padding:0; border-radius:0 }
/* @BL-SHARED core=trust-mini canon=index.html pages=6 — avatar stack + stars + review count: edit ⇒ replicate per SHARED_COMPONENTS.md §trust-mini, then run tests/shared-sync.html */
.bl-trust__row { display:flex; align-items:center; gap:clamp(5px,.6vw,8px) }
.bl-trust__stars { display:flex; align-items:center; gap:clamp(2px,.28vw,5px) }
.bl-trust__stars > * { width:var(--fl-star) !important; height:var(--fl-star) !important; flex-shrink:0 }
.bl-trust__score { font-size:var(--fl-score); font-weight:700; color:#160E28; white-space:nowrap }
.bl-trust__score span { color:#4D4D4D }
.bl-trust__cap { margin-top:clamp(3px,.4vw,7px); font-size:var(--fl-cap); color:#160E28; white-space:nowrap }
/* v12 — reviews carousel: three cards ALWAYS fit the viewport, at every width.
A grid track, not fixed 360px cards — identical on Home and Pricing. */
/* @BL-SHARED core=reviews canon=index.html pages=2 — carousel structure + CSS are shared with Pricing; the review texts themselves may differ per page. Edit structure/CSS ⇒ replicate per SHARED_COMPONENTS.md §reviews, then run tests/shared-sync.html */
.bl-revtrack { display:flex; gap:var(--fl-revgap); transition:transform .45s ease }
.bl-revslide { flex:0 0 100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--fl-revgap) }
.bl-card { background:#FFFFFF; border:1px solid #ECECEC; border-radius:20px; padding:clamp(18px,2.2vw,32px); box-sizing:border-box; box-shadow:0 8px 32px rgba(0,0,0,.06); min-width:0 }
.bl-card__av { width:clamp(34px,3vw,44px); height:clamp(34px,3vw,44px); border-radius:50%; object-fit:cover; flex-shrink:0; background:#EFEBF3 }
.bl-card__name { font-size:clamp(13px,1.05vw,16px); font-weight:500; color:#160E28 }
.bl-card .bl-trust__stars > * { width:var(--fl-cstar) !important; height:var(--fl-cstar) !important }
.bl-card__q { margin:0; font-size:clamp(12px,1vw,14px); line-height:1.5; color:#160E28; text-wrap:pretty }
/* G2f — lift without a permanent GPU layer */
.bl-lift { transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease }
.bl-lift:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(22,14,40,.28) }
/* PR4 — nav and footer links carry a full 44px hit area without changing how they look:
the padding is vertical only and the negative margin keeps the visual rhythm identical */
.bl-navlink { display:inline-flex; align-items:center; min-height:44px; padding:11px 0; margin:-11px 0; box-sizing:content-box }
/* @BL-SHARED core=buttons canon=components/bl-header.js pages=12 — r30: the .bl-cta / --dark / --grad / --ghost / --sm cluster is injected once by components/bl-header.js (the single technical source on every page). Edit it ONLY there; never re-add page copies. */
/* v11 §6.4 — the four egg triggers are real buttons: visible focus ring, click feedback */
#megaZone:focus-visible, #aiCardMark:focus-visible, h1 img[role="button"]:focus-visible { outline:3px solid #DB61DD; outline-offset:4px; border-radius:12px }
#megaZone:hover img { transform:scale(1.06) rotate(-3deg) }
#megaZone:active img { transform:scale(.97) rotate(2deg) }
@media (prefers-reduced-motion: reduce) { #megaZone img { transition:none } #megaZone:hover img, #megaZone:active img { transform:none } }
/* r18 — metric-compatible fallback. Locks the fallback's line box to Inter's, so the swap
moves nothing vertically. Values derived from the Inter file Google Fonts serves:
unitsPerEm 2048, hhea ascender 1984, descender -494, lineGap 0.
size-adjust stays 100%: the per-platform advance ratio was not measurable and a guessed
value would move text horizontally. */
@supports (ascent-override: 90%) {
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust: 100%;
ascent-override: 96.88%;
descent-override: 24.12%;
line-gap-override: 0%;
font-display: swap;
}
}
/* r22 — x-import mounts paint the runtime's .sc-placeholder (gray fill + 1px
border) until their module arrives; in the header slot it flashed as a bordered
rectangle above the skeleton. Placeholders keep their reserved size but draw
nothing — the .sk skeletons are the only loading UI. Identical on all pages. */
.sc-placeholder { background:transparent !important; border:0 !important }
/* S1 — skeleton system (identical on all five pages, per 07 §S9) */
.sk { position:relative; overflow:hidden; background:#EFEBF3; border-radius:10px; display:block }
.sk::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent); animation:skShine 1.6s ease-in-out infinite }
.sk--text { height:12px; border-radius:6px }
.sk--line { height:16px; border-radius:8px }
.sk--title { height:26px; border-radius:8px }
.sk--h1 { height:46px; border-radius:12px }
.sk--avatar { border-radius:50% }
.sk--pill { height:60px; border-radius:100px }
.sk--card { border-radius:20px }
.sk--img { border-radius:24px }
/* r18 — placeholders under 24px carry no sweep: at that size the sweep is not legible and
the extra compositing shows up in INP. The base .sk fill still makes them visible. */
.sk--micro::after { content:none }
/* r22 — a text placeholder that wraps EXACTLY like the copy it stands in for.
The block-bar approach hard-codes a line count, which is only correct above the type
clamp knee (--fl-t19 floors at ~1007px, --fl-t14 at ~1100px) — below it the column keeps
shrinking while the text stops, the real copy takes an extra line, and the reservation
under-shoots. This band carries the real string at the real font-size/line-height with
transparent ink, so the line count is the same by construction at every width.
The sweep runs on background-position because an inline box cannot clip a ::after. */
.sk--ink { display:inline; color:transparent; border-radius:6px;
background-image:linear-gradient(90deg,#EFEBF3 0%,#F7F4FA 50%,#EFEBF3 100%);
background-size:200% 100%; background-repeat:repeat;
-webkit-box-decoration-break:clone; box-decoration-break:clone;
animation:skInkShine 1.6s ease-in-out infinite }
@keyframes skInkShine { from { background-position:100% 0 } to { background-position:-100% 0 } }
/* S11 — staggered reveal, capped at 240ms so it never reads as slow */
.bl-fade-in { animation:blFadeIn .38s cubic-bezier(.22,.61,.36,1) both }
.bl-fade-in:nth-of-type(1) { animation-delay:0ms }
.bl-fade-in:nth-of-type(2) { animation-delay:60ms }
.bl-fade-in:nth-of-type(3) { animation-delay:120ms }
.bl-fade-in:nth-of-type(4) { animation-delay:180ms }
.bl-fade-in:nth-of-type(n+5) { animation-delay:240ms }
@keyframes blFadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
/* S11 — one completion pulse, then G5's resting line takes over for good */
@keyframes blBarDone { 0% { filter:brightness(1) } 35% { filter:brightness(1.35) } 100% { filter:brightness(1); box-shadow:none } }
/* G2e — skip work for sections below the first screen */
.bl-defer { content-visibility:auto; contain-intrinsic-size:auto 600px }
.bl-defer.bl-marquee { contain-intrinsic-size:auto 148px }
.bl-defer--table{contain-intrinsic-size:auto 1200px}
.bl-defer--faq{contain-intrinsic-size:auto 700px}
.bl-defer--demo{contain-intrinsic-size:auto 421px}
.bl-defer.bl-reviews { contain-intrinsic-size:auto 484px }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
.bl-clock__hand--min { animation:none; transform:rotate(45deg) }
.bl-clock__hand--sec { animation:none; transform:rotate(200deg) }
.sk::after { animation:none }
.bl-fade-in { animation:none }
}
/* v12.1 — the bundle icons ship their OWN hard-sized wrapper +