/* GENERATED by dev/build-r38 — Home page-scoped rules (src/ui/homePageCss.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);
/* r21 6.2 — the sub-threshold engagement colour */
--bl-warn: #E5484D;
/* 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-sugrow: clamp(48px, 4.2vw, 60px);
--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-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: #160E28; }
a:hover { color: #DB61DD; }
@keyframes blFlow { 0% { background-position: 0% 50% } 100% { background-position: 300% 50% } }
@keyframes blSheen { 0% { transform: translateX(-100%) } 60%,100% { transform: translateX(100%) } }
/* H8 — the cards were white on white and their lower edge vanished; the band
extends past them and each card gets a real border + shadow */
/* 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 } }
/* 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 } }
@keyframes blPop { from { opacity:0; transform:translateY(14px) scale(.96) } to { opacity:1; transform:none } }
.bl-float { animation: blFloat 4.5s ease-in-out infinite; }
@keyframes blFloat { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-10px) rotate(-2deg) } }
@keyframes blSpin { from { transform: rotate(0) } to { transform: rotate(1080deg) } }
@keyframes blMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@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: no ring and no ticks, just the two live hands and the centre dot */
/* the box is sized to the hands' real sweep (22px) — a 32px box left phantom padding
that made the glyph read as sitting high and left of its label */
/* the glyph reads 1px high against the label's x-height band, so the CLOCK moves — never the text */
.bl-clock { position:relative; top:1px; display:inline-flex; width:22px; height:22px; flex-shrink:0 }
.bl-clock::after { content:""; position:absolute; left:50%; top:50%; width:3.2px; height:3.2px; margin:-1.6px 0 0 -1.6px; border-radius:50%; background:#E16AD2 }
.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:6.5px; margin-left:-1px; margin-top:-6.5px; animation:blClockSpin 72s linear infinite }
.bl-clock__hand--sec { width:1.5px; height:9px; margin-left:-.75px; margin-top:-9px; 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. */
/* v12 — the statistics module and the phone mock scale as one unit, so the phone is
always fully visible beside the three columns instead of wrapping below them. */
.bl-statrow { margin-top:clamp(22px,2.9vw,40px); display:flex; gap:clamp(10px,1.5vw,22px) }
.bl-statcol { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:clamp(12px,1.7vw,24px) }
.bl-statcol__h { width:100%; text-align:center; font-size:clamp(12px,1.1vw,16px); font-weight:500; line-height:1.15; color:#160E28 }
.bl-statstack { width:100%; display:flex; flex-direction:column; gap:clamp(7px,.8vw,11px) }
.bl-statnow { width:100%; min-height:clamp(48px,4.6vw,67px); background:#F8F8F8; border-radius:clamp(12px,1.3vw,18px); display:flex; align-items:center; justify-content:center; gap:clamp(6px,.85vw,12px); padding:0 clamp(8px,.9vw,14px); box-sizing:border-box }
.bl-statnow__l { font-size:clamp(10.5px,1vw,14px); font-weight:500; line-height:1; color:rgba(51,51,51,.6); white-space:nowrap }
.bl-statnow__b { width:clamp(38px,5.9vw,84px); height:6px; border-radius:3px; background:#ECECEC; overflow:hidden; flex-shrink:0 }
/* r19 — .bl-statnow__v is defined once, with its r19 state classes, further down this stylesheet. */
.bl-statbig { width:100%; min-height:clamp(92px,9.2vw,134px); background:rgba(248,248,248,.58); border-radius:clamp(12px,1.3vw,18px); padding:clamp(15px,1.95vw,28px); box-sizing:border-box; display:flex; flex-direction:column; gap:clamp(6px,.8vw,11px) }
.bl-statbig__l { font-size:clamp(10.5px,1vw,14px); font-weight:500; line-height:1; color:rgba(51,51,51,.6) }
.bl-statbig__v { font-size:clamp(23px,2.65vw,38px); font-weight:800; line-height:1; background:linear-gradient(90deg,#DD64DB,#F590A4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.bl-statbig__bar { width:100%; height:6px; border-radius:3px; background:#ECECEC; overflow:hidden; margin-top:auto }
.bl-statbig__bar > div { height:6px; border-radius:3px; background:linear-gradient(90deg,#DD64DB,#F590A4); transition:width .2s linear }
/* r36 — the three stat columns read as three regions: a whisper of brand tint per column
(rose / lilac / peach), one step deeper on the column being "computed". During the demo
chain the .bl-statspot halo glides behind the active column (followers → engagement →
likes → engagement); once real data is live the glide retires and each column confirms
itself with one green landing pulse instead. */
.bl-statrow { position:relative }
/* r37 — the columns are proper cards now: inner padding lifts the titles
off the card edge, and all three tints stay inside the brand ramp
(magenta → pink → coral) instead of mixing off-brand lilac and orange.
One step deeper while that column is "computing". */
.bl-statcol { position:relative; z-index:1; border-radius:clamp(14px,1.5vw,20px); padding:clamp(12px,1.4vw,18px) clamp(12px,1.4vw,18px) clamp(14px,1.6vw,20px); box-sizing:border-box; transition:background-color .45s ease }
.bl-statcol--a { background:rgba(219,97,221,.05) }
.bl-statcol--b { background:rgba(240,114,205,.05) }
.bl-statcol--c { background:rgba(248,146,154,.06) }
.bl-statcol--a.is-calc { background:rgba(219,97,221,.10) }
.bl-statcol--b.is-calc { background:rgba(240,114,205,.10) }
.bl-statcol--c.is-calc { background:rgba(248,146,154,.11) }
.bl-statcol--a .bl-statnow, .bl-statcol--b .bl-statnow, .bl-statcol--c .bl-statnow { background:rgba(248,248,248,.7) }
.bl-statspot { position:absolute; left:0; top:0; width:0; height:0; z-index:0; border-radius:clamp(14px,1.5vw,20px); opacity:0; pointer-events:none; background:linear-gradient(135deg, rgba(219,97,221,.12), rgba(240,114,205,.10) 55%, rgba(248,146,154,.09)); box-shadow:0 0 0 1.5px rgba(219,97,221,.30), 0 18px 36px -22px rgba(240,114,205,.55); transition:left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1), width .6s cubic-bezier(.4,0,.2,1), height .6s cubic-bezier(.4,0,.2,1), opacity .4s ease }
@keyframes blColLand { 0%,100% { box-shadow:0 0 0 0 rgba(61,180,110,0) } 35% { box-shadow:0 0 0 3px rgba(61,180,110,.3) } }
.bl-statcol:has(.bl-statbig.is-forecast) { animation:blColLand 1.15s ease 1 }
/* the phone is a 417x759 design laid out in %, so it scales whole and never clips */
.bl-phone { position:relative; width:clamp(196px,23.5vw,417px); aspect-ratio:417/759; flex:0 0 auto; contain:layout paint }
/* r38.2 — adaptive (narrow DESKTOP): same fluid idea as v12 with lower floors — blocks and
text SHRINK; nothing rearranges into mobile layouts and no text is removed. Footer: on one
grid the LEGAL column docks right of the support block instead of falling far-left.
r38.3.1 — overrides are parent-qualified: this block sits mid-sheet, and several base
rules it beats are defined LATER at equal specificity (order alone would lose). */
.bl-foot__brand a { max-width:100% }
.bl-foot__brand [data-bl-support] { width:100% }
@media (max-width: 1023px) {
.bl-statrow { gap:8px }
.bl-statrow .bl-statnow { gap:5px; padding:0 8px }
.bl-statrow .bl-statnow__b { width:clamp(22px,4.2vw,84px) }
.bl-statrow .bl-statnow__l { font-size:9.5px }
.bl-statrow .bl-statnow__v { font-size:12px }
.bl-statrow .bl-statcol__h { font-size:11px }
.bl-statrow .bl-statbig { padding:12px; min-height:84px }
.bl-statrow .bl-statbig__v { font-size:clamp(17px,2.2vw,38px) }
.bl-statrow .bl-fchip { height:20px; padding:0 8px; font-size:11px }
.bl-foot .bl-foot__cols { display:grid; grid-template-columns:minmax(200px,340px) 1fr 1fr }
.bl-foot .bl-foot__brand { grid-row:1 / span 2 }
}
.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 { will-change:transform; 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. */
/* 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--phone { aspect-ratio:417/759; width:100%; border-radius:clamp(18px,2.4vw,40px) }
.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--tiles{contain-intrinsic-size:auto 410px}
.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 +