:root { --paper: #FAF7F5; --paper-2: #F3EEEB; --white: #FFFFFF; --ink: #121011; --ink-2: #1C191A; --ink-3: #2C2627; --muted: #625A5C; --on-ink: #F6F2F1; --on-ink-muted: #A9A0A2; --line: #E6DFDC; --red: #E0252E; --red-hot: #FF4B53; --red-soft: #FCEAEA; --lilac: #B9A7FF; --lilac-deep: #5B44C9; --lilac-soft: #EFEBFF; --amber: #F2B53B; --green: #1FA855; --shadow: 0 1px 2px rgba(18,16,17,.06), 0 24px 48px -24px rgba(18,16,17,.28); --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --f-body: "Figtree", "Segoe UI", system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; --t-xs: .8125rem; --t-sm: .9375rem; --t-md: 1.0625rem; --t-lg: 1.1875rem; --t-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); --t-2xl: clamp(2rem, 1.3rem + 3vw, 3.75rem); --t-hero: clamp(2.9rem, 1.2rem + 7.4vw, 7.4rem); --radius: 20px; --gutter: 20px; --ease: cubic-bezier(.2,.8,.2,1); --header-h: 68px; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } html body:not(#fa) { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-md); line-height: 1.6; -webkit-font-smoothing: antialiased; } html body:not(#fa) main, html body:not(#fa) footer, html body:not(#fa) .band { overflow-x: clip; } html body:not(#fa) img { max-width: 100%; display: block; } html body:not(#fa) h1, html body:not(#fa) h2, html body:not(#fa) h3, html body:not(#fa) h4 { font-family: var(--f-display); line-height: 1.04; letter-spacing: -.03em; margin: 0; text-wrap: balance; font-weight: 800; } html body:not(#fa) p { margin: 0; } html body:not(#fa) a { color: inherit; } html body:not(#fa) button, html body:not(#fa) input, html body:not(#fa) select, html body:not(#fa) textarea { font: inherit; color: inherit; } html body:not(#fa) :focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; border-radius: 6px; } html body:not(#fa) a:focus:not(:focus-visible), html body:not(#fa) button:focus:not(:focus-visible) { outline: none; } html body:not(#fa) [hidden] { display: none !important; } html body:not(#fa) .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html body:not(#fa) .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); } html body:not(#fa) .band { padding-block: 56px; } html body:not(#fa) .band--ink { background: var(--ink); color: var(--on-ink); } html body:not(#fa) .band--lilac { background: var(--lilac-soft); } html body:not(#fa) .band--tight { padding-top: 0; } html body:not(#fa) .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--red); } html body:not(#fa) .kicker::before { content: ""; width: 22px; height: 1.5px; background: currentColor; } html body:not(#fa) .band--ink .kicker { color: var(--red-hot); } html body:not(#fa) .band--lilac .kicker, html body:not(#fa) .kicker--lilac { color: var(--lilac-deep); } html body:not(#fa) .section-head { display: grid; gap: 14px; margin-bottom: 28px; max-width: 760px; } html body:not(#fa) .section-head h2 { font-size: var(--t-2xl); } html body:not(#fa) .section-head p { font-size: var(--t-lg); color: var(--muted); max-width: 58ch; } html body:not(#fa) .band--ink .section-head p { color: var(--on-ink-muted); } html body:not(#fa) .section-head--split { max-width: none; } html body:not(#fa) .accent { color: var(--red); } html body:not(#fa) .band--ink .accent { color: var(--red-hot); } html body:not(#fa) .accent-lilac { color: var(--lilac-deep); } html body:not(#fa) .band--ink .accent-lilac { color: var(--lilac); } html body:not(#fa) .note { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); letter-spacing: .02em; } html body:not(#fa) .band--ink .note { color: var(--on-ink-muted); } html body:not(#fa) .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--paper-2); color: var(--muted); } html body:not(#fa) .tag--sample { background: #FFF3D6; color: #7A5300; } html body:not(#fa) .btn { --bg: var(--ink); --fg: var(--white); --bd: var(--bg); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); font-weight: 650; font-size: var(--t-md); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; white-space: nowrap; } html body:not(#fa) .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px var(--bg); } html body:not(#fa) .btn svg { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease); } html body:not(#fa) .btn:hover .arrow { transform: translateX(4px); } html body:not(#fa) .btn--red { --bg: var(--red); } html body:not(#fa) .btn--lilac { --bg: var(--lilac); --fg: var(--ink); } html body:not(#fa) .btn--wa { --bg: var(--green); } html body:not(#fa) .btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); } html body:not(#fa) .btn--ghost:hover { box-shadow: none; border-color: var(--ink); } html body:not(#fa) .btn--ghost-light { --bg: transparent; --fg: var(--on-ink); --bd: rgba(246,242,241,.3); } html body:not(#fa) .btn--ghost-light:hover { box-shadow: none; border-color: var(--on-ink); } html body:not(#fa) .btn--sm { min-height: 44px; padding: 0 18px; font-size: var(--t-sm); } html body:not(#fa) .fa-header { position: sticky; top: 0; z-index: 50; background: rgba(250,247,245,.86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } html body:not(#fa) .fa-header.scrolled { border-bottom-color: var(--line); } html body:not(#fa) .fa-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); } html body:not(#fa) .logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.035em; } html body:not(#fa) .logo img { width: 30px; height: 30px; border-radius: 8px; } html body:not(#fa) .logo .f { color: var(--red); } html body:not(#fa) .logo small { display: none; font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); } html body:not(#fa) .nav { display: none; gap: 28px; } html body:not(#fa) .nav a { text-decoration: none; font-weight: 550; color: var(--muted); transition: color .2s; } html body:not(#fa) .nav a:hover, html body:not(#fa) .nav a[aria-current="page"] { color: var(--ink); } html body:not(#fa) .head-actions { display: flex; align-items: center; gap: 8px; } html body:not(#fa) .head-actions .btn { display: none; } html body:not(#fa) .menu-btn { width: 46px; height: 46px; padding: 0; border-radius: 14px; border: 1.5px solid var(--line); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; } html body:not(#fa) .menu-btn span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); } html body:not(#fa) .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } html body:not(#fa) .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } html body:not(#fa) .drawer { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--paper); padding: 20px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 24px; overflow-y: auto; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility .3s; } html body:not(#fa) .drawer.open { opacity: 1; transform: none; visibility: visible; } html body:not(#fa) .drawer nav { display: grid; } html body:not(#fa) .drawer nav a { font-family: var(--f-display); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } html body:not(#fa) .drawer nav a::after { content: "→"; font-size: 1.2rem; color: var(--red); } html body:not(#fa) .drawer .drawer-ctas { display: grid; gap: 10px; margin-top: auto; } html body:not(#fa).menu-open { overflow: hidden; } html body:not(#fa) .hero { --loop: 9s; position: relative; padding-block: 28px 64px; overflow: hidden; isolation: isolate; } html body:not(#fa) .hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } html body:not(#fa) .hero-bg i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; } html body:not(#fa) .hero-bg i:nth-child(1) { width: 420px; height: 420px; right: -120px; top: -80px; background: #FFD3D5; } html body:not(#fa) .hero-bg i:nth-child(2) { width: 380px; height: 380px; right: 18%; bottom: -160px; background: var(--lilac-soft); animation-delay: -6s; } html body:not(#fa) .hero-bg i:nth-child(3) { width: 260px; height: 260px; left: -120px; top: 40%; background: #FFE9C2; opacity: .35; animation-delay: -12s; } @keyframes drift { to { transform: translate(-40px, 30px) scale(1.12); } } html body:not(#fa) .hero-grid { display: grid; gap: 40px; align-items: center; } html body:not(#fa) .hero-copy { display: grid; gap: 22px; } html body:not(#fa) .hero h1 { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.4rem); letter-spacing: -.05em; line-height: .95; } html body:not(#fa) .hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; } html body:not(#fa) .hero h1 .line > span { display: inline-block; animation: rise 1s var(--ease) both; } html body:not(#fa) .hero h1 .line:nth-child(2) > span { animation-delay: .12s; } html body:not(#fa) .hero h1 .line:nth-child(3) > span { animation-delay: .24s; } html body:not(#fa) .hero h1 .line:nth-child(4) > span { animation-delay: .36s; } html body:not(#fa) .hero h1 mark { background: none; color: var(--red); position: relative; white-space: nowrap; } html body:not(#fa) .hero h1 mark::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .08em; height: .26em; z-index: -1; border-radius: .08em; background: var(--lilac); opacity: .55; transform-origin: left; animation: grow-x .9s var(--ease) .9s both; } @keyframes rise { from { transform: translateY(102%); } } @keyframes grow-x { from { transform: scaleX(0); } } @keyframes fade-up { from { opacity: .001; transform: translateY(16px); } } html body:not(#fa) .hero-lede { font-size: var(--t-lg); color: var(--muted); max-width: 48ch; animation: fade-up .8s var(--ease) .3s both; } html body:not(#fa) .hero-lede b { color: var(--ink); font-weight: 650; } html body:not(#fa) .hero-ctas { display: grid; gap: 10px; animation: fade-up .8s var(--ease) .4s both; } html body:not(#fa) .loop-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; animation: fade-up .8s var(--ease) .5s both; } html body:not(#fa) .loop-steps li { position: relative; display: grid; gap: 2px; padding: 12px 12px 14px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); overflow: hidden; } html body:not(#fa) .loop-steps li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; animation: step-bar var(--loop) linear infinite; animation-delay: var(--d); } html body:not(#fa) .loop-steps li:nth-child(1) { --c: var(--red); --d: 0s; } html body:not(#fa) .loop-steps li:nth-child(2) { --c: var(--lilac-deep); --d: 3s; } html body:not(#fa) .loop-steps li:nth-child(3) { --c: var(--green); --d: 6s; } @keyframes step-bar { 0% { transform: scaleX(0); } 31% { transform: scaleX(1); opacity: 1; } 33.3%, 100% { transform: scaleX(1); opacity: 0; } } html body:not(#fa) .loop-steps b { display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: var(--t-md); letter-spacing: -.01em; } html body:not(#fa) .loop-steps b i { font-style: normal; font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--c); } html body:not(#fa) .loop-steps span { font-size: 12px; color: var(--muted); line-height: 1.3; } html body:not(#fa) .stage { position: relative; width: 100%; height: calc(560px * var(--k, 1)); } html body:not(#fa) .stage-inner { position: absolute; left: 50%; top: 0; width: 540px; height: 560px; transform-origin: top center; transform: translateX(-50%) scale(var(--k, 1)); } html body:not(#fa) .stage-inner > * { position: absolute; } html body:not(#fa) .flow { inset: 0; width: 100%; height: 100%; overflow: visible; } html body:not(#fa) .flow path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 9; animation: flow 1.2s linear infinite; } html body:not(#fa) .flow .p1 { stroke: var(--red); } html body:not(#fa) .flow .p2 { stroke: var(--lilac-deep); } @keyframes flow { to { stroke-dashoffset: -22; } } html body:not(#fa) .flow .dot { animation: none; } html body:not(#fa) .stage-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 18px -10px rgba(0,0,0,.6); } html body:not(#fa) .stage-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); } html body:not(#fa) .site { left: 0; top: 30px; width: 252px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); overflow: visible; animation: card-in .9s var(--ease) .2s both; } html body:not(#fa) .site-bar { display: flex; gap: 5px; align-items: center; padding: 9px 10px; background: var(--paper-2); border-radius: 16px 16px 0 0; } html body:not(#fa) .site-bar i { width: 7px; height: 7px; border-radius: 50%; background: #DDD3D0; } html body:not(#fa) .site-bar span { margin-left: 6px; flex: 1; height: 15px; border-radius: 99px; background: var(--white); font: 500 8.5px var(--f-mono); color: var(--muted); display: flex; align-items: center; gap: 4px; padding: 0 7px; } html body:not(#fa) .site-bar span svg { width: 7px; height: 7px; color: var(--green); } html body:not(#fa) .site-body { padding: 9px 10px 10px; display: grid; gap: 7px; } html body:not(#fa) .site-body > * { border-radius: 8px; animation: build var(--loop) var(--ease) infinite both; } html body:not(#fa) .site-nav { display: flex; align-items: center; gap: 7px; font-size: 7.5px; font-weight: 600; color: var(--muted); animation-delay: .1s !important; } html body:not(#fa) .site-nav b { margin-right: auto; font: 800 11.5px var(--f-display); letter-spacing: -.02em; color: var(--ink); } html body:not(#fa) .site-nav b em { font-style: normal; color: var(--red); } html body:not(#fa) .site-nav .bag { position: relative; width: 13px; height: 13px; color: var(--ink); } html body:not(#fa) .site-nav .bag svg { width: 100%; height: 100%; display: block; } html body:not(#fa) .site-nav .bag s { position: absolute; top: -4px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); color: #fff; font: 700 6.5px/10px var(--f-body); text-align: center; text-decoration: none; } html body:not(#fa) .site-hero { position: relative; height: 72px; overflow: hidden; animation-delay: .2s !important; } html body:not(#fa) .site-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } html body:not(#fa) .site-hero > div { position: absolute; inset: 0; padding: 8px 9px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; color: #fff; background: linear-gradient(90deg, rgba(38,12,38,.7), rgba(38,12,38,.15) 75%); } html body:not(#fa) .site-hero small { font: 500 6.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .9; } html body:not(#fa) .site-hero b { font: 800 12px/1.05 var(--f-display); letter-spacing: -.02em; } html body:not(#fa) .site-hero em { margin-top: 3px; padding: 3px 8px; border-radius: 99px; background: #fff; color: var(--ink); font: 700 7px var(--f-body); font-style: normal; } html body:not(#fa) .site-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 7.5px; color: var(--muted); animation-delay: .45s !important; } html body:not(#fa) .site-head b { font: 800 10px var(--f-display); color: var(--ink); } html body:not(#fa) .site-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; animation-delay: .6s !important; } html body:not(#fa) .site-grid figure { position: relative; margin: 0; font-size: 7px; font-weight: 600; line-height: 1.25; color: var(--ink); } html body:not(#fa) .site-grid img { display: block; width: 100%; height: 54px; border-radius: 6px; object-fit: cover; object-position: 50% 15%; background: var(--paper-2); } html body:not(#fa) .site-grid figcaption { margin-top: 3px; } html body:not(#fa) .site-grid figcaption b { display: block; color: var(--red); font-weight: 800; font-size: 7.5px; } html body:not(#fa) .site-btn { height: 22px; border-radius: 99px !important; background: var(--red); color: #fff; font: 700 8.5px/22px var(--f-body); text-align: center; animation-delay: .85s !important; } @keyframes build { 0% { opacity: 0; transform: translateY(8px) scale(.97); } 6%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } } html body:not(#fa) .site .stage-chip { position: absolute; z-index: 2; right: 10px; top: -12px; } html body:not(#fa) .site-wrap { left: 0; top: 34px; } html body:not(#fa) .phone { left: 286px; top: 0; width: 236px; height: 470px; border-radius: 38px; padding: 9px; background: linear-gradient(160deg, #3A3233, #0B0A0A 45%); box-shadow: 0 40px 70px -30px rgba(18,16,17,.65); animation: card-in 1s var(--ease) .35s both, float 7s ease-in-out 1.4s infinite; } html body:not(#fa) .reel { position: relative; height: 100%; border-radius: 30px; overflow: hidden; background: #000; color: #fff; } html body:not(#fa) .reel > * { position: absolute; z-index: 2; } html body:not(#fa) .reel > img { z-index: 0; inset: 0 0 34px; width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: 48% 30%; animation: kenburns calc(var(--loop) * 2) ease-in-out infinite alternate; } @keyframes kenburns { to { transform: scale(1.1) translate(-2%, 2%); } } html body:not(#fa) .reel::before { content: ""; position: absolute; inset: 0 0 34px; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 20%, transparent 50%, rgba(0,0,0,.8)); z-index: 1; } html body:not(#fa) .ig-status { top: 10px; left: 20px; right: 18px; display: flex; justify-content: space-between; align-items: center; font: 700 10px var(--f-body); } html body:not(#fa) .ig-status span { display: flex; gap: 4px; align-items: center; } html body:not(#fa) .ig-status svg { width: 11px; height: 10px; } html body:not(#fa) .ig-status svg + svg { width: 19px; } html body:not(#fa) .ig-head { top: 30px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; } html body:not(#fa) .ig-head b { font: 800 15px var(--f-display); letter-spacing: -.02em; } html body:not(#fa) .ig-head svg { width: 19px; height: 19px; } html body:not(#fa) .reel-side { right: 8px; bottom: 88px; display: grid; gap: 11px; justify-items: center; font-size: 9px; font-weight: 700; } html body:not(#fa) .reel-side div { display: grid; justify-items: center; gap: 2px; } html body:not(#fa) .reel-side svg { width: 22px; height: 22px; } html body:not(#fa) .reel-side .like svg { color: #FF3040; animation: like-pulse var(--loop) var(--ease) infinite; } @keyframes like-pulse { 0%, 30% { transform: scale(1); } 33% { transform: scale(1.35); } 36%, 100% { transform: scale(1); } } html body:not(#fa) .ig-disc { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; background: var(--red); display: grid; place-items: center; } html body:not(#fa) .reel-side .ig-disc svg { width: 11px; height: 11px; } html body:not(#fa) .ig-meta { left: 11px; right: 44px; bottom: 84px; display: grid; gap: 4px; font-size: 9px; line-height: 1.3; } html body:not(#fa) .ig-meta p { margin: 0; } html body:not(#fa) .ig-user { display: flex; align-items: center; gap: 6px; } html body:not(#fa) .ig-user .ava { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--red); box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #F77737; flex: none; } html body:not(#fa) .ig-user .ava svg { width: 12px; height: 12px; color: #fff; } html body:not(#fa) .ig-user b { font-size: 10.5px; } html body:not(#fa) .ig-user em { font-style: normal; font-weight: 700; font-size: 9px; padding: 2px 8px; border: 1px solid rgba(255,255,255,.85); border-radius: 7px; } html body:not(#fa) .ig-paid { font-size: 8.5px; opacity: .9; } html body:not(#fa) .reel-cap span { opacity: .65; } html body:not(#fa) .ig-audio { display: flex; align-items: center; gap: 4px; font-size: 8.5px; } html body:not(#fa) .ig-audio svg { width: 9px; height: 9px; } html body:not(#fa) .reel-sticker { left: 10px; right: 10px; bottom: 42px; display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 5px; border-radius: 10px; background: rgba(255,255,255,.96); color: var(--muted); font-size: 8px; line-height: 1.25; } html body:not(#fa) .reel-sticker img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; object-position: 50% 60%; flex: none; } html body:not(#fa) .reel-sticker span { flex: 1; } html body:not(#fa) .reel-sticker b { display: block; color: var(--ink); font-size: 9.5px; } html body:not(#fa) .reel-sticker svg { width: 12px; height: 12px; color: var(--ink); } html body:not(#fa) .ig-nav { left: 0; right: 0; bottom: 0; height: 34px; padding: 0 14px 4px; background: #000; display: flex; justify-content: space-between; align-items: center; } html body:not(#fa) .ig-nav svg { width: 17px; height: 17px; } html body:not(#fa) .ig-nav i { width: 17px; height: 17px; border-radius: 50%; background: var(--lilac); border: 1.5px solid #fff; } html body:not(#fa) .phone .stage-chip { position: absolute; z-index: 4; left: 50%; translate: -50% 0; top: -12px; } html body:not(#fa) .hearts { left: 446px; top: 150px; width: 80px; height: 260px; pointer-events: none; } html body:not(#fa) .hearts i { position: absolute; bottom: 0; left: var(--x); width: 18px; height: 18px; color: #FF3B5C; opacity: 0; animation: heart var(--loop) ease-out infinite; animation-delay: var(--d); } html body:not(#fa) .hearts i svg { width: 100%; height: 100%; } @keyframes heart { 0%, 31% { opacity: 0; transform: translateY(0) scale(.6); } 34% { opacity: 1; } 55% { opacity: 0; transform: translateY(-220px) translateX(var(--sway)) scale(1.15) rotate(var(--rot)); } 100% { opacity: 0; } } html body:not(#fa) .grow { left: 0; top: 326px; width: 252px; display: grid; gap: 10px; } html body:not(#fa) .notif { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); font-size: 11.5px; line-height: 1.3; opacity: 0; animation: notif var(--loop) var(--ease) infinite; animation-delay: var(--d); } html body:not(#fa) .notif .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--green); color: #fff; flex: none; } html body:not(#fa) .notif .ic svg { width: 16px; height: 16px; } html body:not(#fa) .notif b { display: block; font-size: 12px; } html body:not(#fa) .notif span { color: var(--muted); } html body:not(#fa) .n1 { --d: 6s; } html body:not(#fa) .n2 { --d: 6.6s; } @keyframes notif { 0% { opacity: 0; transform: translateX(-16px); } 6%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } } html body:not(#fa) .chart { padding: 12px 14px; border-radius: 16px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow); animation: card-in .9s var(--ease) .5s both; } html body:not(#fa) .chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--on-ink-muted); margin-bottom: 6px; } html body:not(#fa) .chart-head b { color: var(--on-ink); font-family: var(--f-display); font-size: 13px; } html body:not(#fa) .chart svg { width: 100%; height: 54px; display: block; overflow: visible; } html body:not(#fa) .chart .area { fill: url(#gr); opacity: .5; } html body:not(#fa) .chart .ln { fill: none; stroke: #5FD3A0; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; animation: draw-line var(--loop) var(--ease) infinite; } html body:not(#fa) .chart .end { fill: #5FD3A0; animation: end-dot var(--loop) var(--ease) infinite; } @keyframes draw-line { 0%, 62% { stroke-dashoffset: 260; } 82%, 100% { stroke-dashoffset: 0; } } @keyframes end-dot { 0%, 78% { opacity: 0; } 84%, 100% { opacity: 1; } } html body:not(#fa) .grow .stage-chip { justify-self: start; } @keyframes card-in { from { opacity: .001; transform: translateY(24px) scale(.96); } } @keyframes float { 50% { transform: translateY(-10px); } } @keyframes spin { to { rotate: 360deg; } } html body:not(#fa) .n-fashion { --n: #E0252E; } html body:not(#fa) .n-beauty { --n: #D9488F; } html body:not(#fa) .n-fitness { --n: #1F8F5A; } html body:not(#fa) .n-food { --n: #E07A1F; } html body:not(#fa) .n-tech { --n: #3B5BDB; } html body:not(#fa) .n-lifestyle { --n: #7A5AF0; } html body:not(#fa) .n-travel { --n: #0E8C9E; } html body:not(#fa) .n-parenting { --n: #B0593A; } html body:not(#fa) .avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--white); overflow: hidden; } html body:not(#fa) .avatar svg { width: 22px; height: 22px; display: block; color: inherit; } html body:not(#fa) .creator-top .avatar svg { width: 24px; height: 24px; } html body:not(#fa) .avatar[class*="n-"] { background: var(--n); } html body:not(#fa) .marquee { overflow: hidden; background: var(--ink); color: var(--on-ink); padding-block: 18px; } html body:not(#fa) .marquee-track { display: flex; width: max-content; gap: 34px; animation: marquee 34s linear infinite; font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; } html body:not(#fa) .marquee-track span { display: inline-flex; align-items: center; gap: 34px; white-space: nowrap; } html body:not(#fa) .marquee-track span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--red-hot); } @keyframes marquee { to { transform: translateX(-50%); } } html body:not(#fa) .journeys { display: grid; gap: 14px; } html body:not(#fa) .journey { position: relative; display: grid; gap: 14px; align-content: start; padding: 26px 24px 24px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); text-decoration: none; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } html body:not(#fa) .journey:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } html body:not(#fa) .journey .num { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; color: var(--muted); } html body:not(#fa) .journey h3 { font-size: var(--t-xl); } html body:not(#fa) .journey p { color: var(--muted); font-size: var(--t-sm); } html body:not(#fa) .journey .go { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: var(--t-sm); } html body:not(#fa) .journey .go svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } html body:not(#fa) .journey:hover .go svg { transform: translateX(4px); } html body:not(#fa) .journey::after { content: ""; position: absolute; width: 180px; aspect-ratio: 1; right: -70px; top: -70px; border-radius: 50%; border: 1.5px solid var(--j, var(--red)); opacity: .35; transition: transform .6s var(--ease), opacity .3s; } html body:not(#fa) .journey:hover::after { transform: scale(1.25); opacity: .7; } html body:not(#fa) .journey--brand { --j: var(--red); } html body:not(#fa) .journey--creator { --j: var(--lilac-deep); background: var(--lilac-soft); border-color: transparent; } html body:not(#fa) .journey--web { --j: var(--ink); background: var(--ink); color: var(--on-ink); border-color: var(--ink); } html body:not(#fa) .journey--web p, html body:not(#fa) .journey--web .num { color: var(--on-ink-muted); } html body:not(#fa) .journey--web::after { border-color: var(--red-hot); } html body:not(#fa) .services { display: grid; gap: 12px; } html body:not(#fa) .service { border-radius: 22px; background: var(--ink-2); border: 1px solid var(--ink-3); overflow: hidden; transition: border-color .3s, background .3s; } html body:not(#fa) .service[data-open="true"] { border-color: var(--s, var(--red-hot)); background: #201C1D; } html body:not(#fa) .service-head { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) 36px; white-space: normal; align-items: center; gap: 16px; padding: 20px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; } html body:not(#fa) .service-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--s, var(--red-hot)) 18%, transparent); color: var(--s, var(--red-hot)); } html body:not(#fa) .service-icon svg { width: 24px; height: 24px; } html body:not(#fa) .service-head h3 { font-size: var(--t-lg); letter-spacing: -.015em; } html body:not(#fa) .service-head small { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-muted); } html body:not(#fa) .service-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: grid; place-items: center; transition: transform .35s var(--ease), background .3s, border-color .3s; } html body:not(#fa) .service-toggle svg { width: 16px; height: 16px; } html body:not(#fa) .service[data-open="true"] .service-toggle { transform: rotate(45deg); background: var(--s, var(--red-hot)); border-color: transparent; color: var(--ink); } html body:not(#fa) .service-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } html body:not(#fa) .service[data-open="true"] .service-body { grid-template-rows: 1fr; } html body:not(#fa) .service-body > div { overflow: hidden; } html body:not(#fa) .service-inner { padding: 0 20px 22px 84px; display: grid; gap: 14px; color: var(--on-ink-muted); } html body:not(#fa) .service-inner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } html body:not(#fa) .service-inner li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ink-3); color: var(--on-ink); font-size: var(--t-xs); } html body:not(#fa) .service-inner a { color: var(--on-ink); font-weight: 650; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; } html body:not(#fa) .service-inner a:hover { color: var(--s, var(--red-hot)); } html body:not(#fa) .s-web { --s: #FF4B53; } html body:not(#fa) .s-ux { --s: #F2B53B; } html body:not(#fa) .s-brand { --s: #FF8A5B; } html body:not(#fa) .s-ig { --s: #B9A7FF; } html body:not(#fa) .s-collab { --s: #D58CFF; } html body:not(#fa) .s-social { --s: #5FD3A0; } html body:not(#fa) .service-group { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-muted); margin: 18px 0 2px; } html body:not(#fa) .service-group:first-child { margin-top: 0; } html body:not(#fa) .network-top { display: grid; gap: 24px; margin-bottom: 32px; } html body:not(#fa) .network-top > * { min-width: 0; } html body:not(#fa) .network-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } html body:not(#fa) .fact { padding: 16px; border-radius: 18px; background: var(--white); border: 1px solid transparent; display: grid; gap: 2px; } html body:not(#fa) .fact { container-type: inline-size; } html body:not(#fa) .fact b { font-family: var(--f-display); font-size: clamp(1rem, 19cqi, 1.9rem); letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; } html body:not(#fa) .fact span { color: var(--muted); font-size: var(--t-xs); line-height: 1.35; } html body:not(#fa) .filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 20px; } html body:not(#fa) .filters::-webkit-scrollbar { display: none; } html body:not(#fa) .filter { flex: none; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; font-weight: 600; font-size: var(--t-sm); color: var(--ink); transition: background .2s, color .2s, border-color .2s; } html body:not(#fa) .filter:hover { border-color: var(--ink); } html body:not(#fa) .filter[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); } html body:not(#fa) .band--lilac .filter { border-color: transparent; } html body:not(#fa) .band--lilac .filter[aria-pressed="true"] { background: var(--lilac-deep); } html body:not(#fa) .creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; } html body:not(#fa) .creator { display: grid; gap: 14px; padding: 18px; border-radius: 22px; background: var(--white); transition: transform .35s var(--ease), box-shadow .35s var(--ease); animation: fade-up .5s var(--ease) both; } html body:not(#fa) .creator:hover { transform: translateY(-4px); box-shadow: var(--shadow); } html body:not(#fa) .creator-top { display: flex; align-items: center; gap: 12px; } html body:not(#fa) .creator-top .avatar { width: 48px; height: 48px; border-radius: 14px; } html body:not(#fa) .creator-top b { display: block; font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: -.02em; line-height: 1.15; } html body:not(#fa) .creator-top span { font-size: var(--t-xs); color: var(--muted); } html body:not(#fa) .creator-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } html body:not(#fa) .creator-stats div { padding: 10px 12px; border-radius: 12px; background: var(--paper); display: grid; gap: 2px; } html body:not(#fa) .creator-stats dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } html body:not(#fa) .creator-stats dd { margin: 0; font-weight: 700; font-size: var(--t-sm); font-variant-numeric: tabular-nums; } html body:not(#fa) .creator-cats { display: flex; flex-wrap: wrap; gap: 6px; } html body:not(#fa) .creator-cats span { padding: 3px 10px; border-radius: 999px; font-size: 12px; background: color-mix(in srgb, var(--n) 10%, var(--white)); color: color-mix(in srgb, var(--n) 85%, var(--ink)); } html body:not(#fa) .creator-bar { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; } html body:not(#fa) .creator-bar i { display: block; height: 100%; width: var(--w); background: var(--n); border-radius: 99px; } html body:not(#fa) .creator .tag { justify-self: start; } html body:not(#fa) .creator-stats--one { grid-template-columns: 1fr; } html body:not(#fa) .avatar.avatar--photo { border-radius: 50%; background: var(--paper-2); box-shadow: 0 0 0 2.5px var(--white), 0 0 0 4.5px var(--n); } html body:not(#fa) .avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; } html body:not(#fa) .creator-top .handle { display: block; color: var(--lilac-deep); font-weight: 600; font-size: var(--t-xs); text-decoration: none; } html body:not(#fa) .creator-top .handle:hover { text-decoration: underline; } html body:not(#fa) .tag--real { background: #E4F6EC; color: #116329; } html body:not(#fa) .network-foot { margin-top: 28px; display: grid; gap: 16px; align-items: center; } html body:not(#fa) .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; } html body:not(#fa) .step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 20px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); } html body:not(#fa) .step::before { counter-increment: step; content: "0" counter(step); width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; color: var(--white); background: var(--ink); } html body:not(#fa) .step:nth-child(2)::before { background: var(--red); } html body:not(#fa) .step:nth-child(3)::before { background: var(--lilac-deep); } html body:not(#fa) .step:nth-child(4)::before { background: #E07A1F; } html body:not(#fa) .step:nth-child(5)::before { background: var(--green); } html body:not(#fa) .step h3 { font-size: var(--t-lg); margin-bottom: 4px; letter-spacing: -.015em; } html body:not(#fa) .step p { color: var(--muted); font-size: var(--t-sm); } html body:not(#fa) .step .who { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } html body:not(#fa) .work { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; } html body:not(#fa) .project { display: grid; grid-template-rows: auto 1fr; border-radius: 24px; overflow: hidden; background: var(--white); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); animation: fade-up .5s var(--ease) both; } html body:not(#fa) .project:hover { transform: translateY(-4px); box-shadow: var(--shadow); } html body:not(#fa) .project-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); } html body:not(#fa) .project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } html body:not(#fa) .project:hover .project-media img { transform: scale(1.05); } html body:not(#fa) .project-media .tag { position: absolute; left: 14px; top: 14px; } html body:not(#fa) .project-body { padding: 20px 20px 22px; display: grid; gap: 8px; align-content: start; } html body:not(#fa) .project-body .cat { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--red); } html body:not(#fa) .project-body h3 { font-size: var(--t-xl); } html body:not(#fa) .project-body p { color: var(--muted); font-size: var(--t-sm); } html body:not(#fa) .project-body ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } html body:not(#fa) .project-body li { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); } html body:not(#fa) .project--campaign .project-body .cat { color: var(--lilac-deep); } html body:not(#fa) .campaign-overlay { position: absolute; inset: auto 12px 12px 12px; display: flex; gap: 6px; } html body:not(#fa) .campaign-overlay span { flex: 1; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.92); font-size: 11px; line-height: 1.25; } html body:not(#fa) .campaign-overlay b { display: block; font-size: 13px; } html body:not(#fa) .why { display: grid; gap: 14px; } html body:not(#fa) .why-item { display: grid; gap: 10px; padding: 24px; border-radius: 22px; border: 1px solid var(--ink-3); background: var(--ink-2); } html body:not(#fa) .why-item .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,75,83,.14); color: var(--red-hot); } html body:not(#fa) .why-item .ico svg { width: 22px; height: 22px; } html body:not(#fa) .why-item h3 { font-size: var(--t-lg); letter-spacing: -.015em; } html body:not(#fa) .why-item p { color: var(--on-ink-muted); font-size: var(--t-sm); } html body:not(#fa) .quotes { display: grid; gap: 14px; } html body:not(#fa) .quote { margin: 0; padding: 24px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); display: grid; gap: 18px; } html body:not(#fa) .quote blockquote { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -.01em; } html body:not(#fa) .quote figcaption { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); } html body:not(#fa) .quote img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); } html body:not(#fa) .quote figcaption span { display: block; color: var(--muted); font-size: var(--t-xs); } html body:not(#fa) .final { display: grid; gap: 14px; } html body:not(#fa) .final-card { position: relative; overflow: hidden; border-radius: 28px; padding: 36px 26px; display: grid; gap: 16px; align-content: start; } html body:not(#fa) .final-card h3 { font-size: var(--t-2xl); } html body:not(#fa) .final-card p { font-size: var(--t-lg); max-width: 40ch; } html body:not(#fa) .final-card .btn { justify-self: start; margin-top: 8px; } html body:not(#fa) .final-card--brand { background: var(--red); color: var(--white); } html body:not(#fa) .final-card--brand p { color: rgba(255,255,255,.85); } html body:not(#fa) .final-card--creator { background: var(--lilac); color: var(--ink); } html body:not(#fa) .final-card::after { content: ""; position: absolute; width: 320px; aspect-ratio: 1; right: -140px; bottom: -160px; border-radius: 50%; border: 2px dashed currentColor; opacity: .35; animation: spin 60s linear infinite; } html body:not(#fa) .fa-footer { background: var(--ink); color: var(--on-ink-muted); padding-block: 64px 28px; font-size: var(--t-sm); } html body:not(#fa) .foot-big { font-family: var(--f-display); font-weight: 800; color: var(--on-ink); font-size: clamp(2.2rem, 1rem + 5vw, 5rem); letter-spacing: -.055em; line-height: .92; margin-bottom: 32px; } html body:not(#fa) .foot-big em { font-style: normal; color: var(--red-hot); } html body:not(#fa) .foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 30px; border-top: 1px solid var(--ink-3); } html body:not(#fa) .foot-grid h4 { font-family: var(--f-mono); font-weight: 500; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink); margin-bottom: 14px; } html body:not(#fa) .foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } html body:not(#fa) .foot-grid a { text-decoration: none; } html body:not(#fa) .foot-grid a:hover { color: var(--on-ink); } html body:not(#fa) .foot-about { grid-column: 1 / -1; display: grid; gap: 12px; max-width: 42ch; } html body:not(#fa) .foot-about .logo { color: var(--on-ink); } html body:not(#fa) .foot-about .logo .f { color: var(--red-hot); } html body:not(#fa) .foot-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } html body:not(#fa) .btn--ig { --bg: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); background: var(--bg); color: #fff; } html body:not(#fa) .foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; } html body:not(#fa) .foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } html body:not(#fa) .foot-legal a:hover { color: var(--on-ink); } html body:not(#fa) .foot-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: var(--t-xs); } html body:not(#fa) .page-hero { padding-block: 44px 56px; } html body:not(#fa) .page-hero .wrap { display: grid; gap: 22px; } html body:not(#fa) .page-hero h1 { font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.4rem); letter-spacing: -.05em; line-height: .95; max-width: 14ch; animation: fade-up .8s var(--ease) both; } html body:not(#fa) .page-hero p { font-size: var(--t-lg); color: var(--muted); max-width: 54ch; animation: fade-up .8s var(--ease) .1s both; } html body:not(#fa) .band--ink.page-hero p { color: var(--on-ink-muted); } html body:not(#fa) .crumbs { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); display: flex; gap: 8px; } html body:not(#fa) .crumbs a { text-decoration: none; } html body:not(#fa) .band--ink .crumbs { color: var(--on-ink-muted); } html body:not(#fa) .hero-points { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--t-sm); } html body:not(#fa) .hero-points li { display: inline-flex; align-items: center; gap: 8px; } html body:not(#fa) .hero-points svg { width: 18px; height: 18px; color: var(--red); flex: none; } html body:not(#fa) .band--ink .hero-points svg { color: var(--red-hot); } html body:not(#fa) .journey-layout { display: grid; gap: 32px; align-items: start; } html body:not(#fa) .aside-card { display: grid; gap: 16px; padding: 24px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); } html body:not(#fa) .aside-card h2 { font-size: var(--t-xl); } html body:not(#fa) .aside-card ol, html body:not(#fa) .aside-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } html body:not(#fa) .aside-card li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; font-size: var(--t-sm); color: var(--muted); } html body:not(#fa) .aside-card li b { display: block; color: var(--ink); font-size: var(--t-md); } html body:not(#fa) .aside-card .n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--ink); } html body:not(#fa) .aside-card--lilac { background: var(--lilac-soft); border-color: transparent; } html body:not(#fa) .aside-card--lilac .n { background: var(--white); } html body:not(#fa) .aside-note { padding: 14px 16px; border-radius: 14px; background: #FFF3D6; color: #5A4300; font-size: var(--t-sm); line-height: 1.5; } html body:not(#fa) .criteria { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } html body:not(#fa) .criteria div { padding: 14px; border-radius: 14px; background: var(--white); display: grid; gap: 4px; font-size: var(--t-xs); color: var(--muted); } html body:not(#fa) .criteria b { font-size: var(--t-sm); color: var(--ink); } html body:not(#fa) .form-card { border-radius: 28px; background: var(--white); border: 1px solid var(--line); padding: 24px 20px; box-shadow: var(--shadow); } html body:not(#fa) .form { display: grid; gap: 28px; } html body:not(#fa) .form-progress { display: flex; gap: 6px; margin-bottom: 4px; } html body:not(#fa) .form-progress i { flex: 1; height: 4px; border-radius: 99px; background: var(--paper-2); transition: background .3s; } html body:not(#fa) .form-progress i.done { background: var(--red); } html body:not(#fa) .form--creator .form-progress i.done { background: var(--lilac-deep); } html body:not(#fa) fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; } html body:not(#fa) legend { padding: 0; margin-bottom: 4px; display: flex; align-items: baseline; gap: 10px; font-family: var(--f-display); font-weight: 800; font-size: var(--t-xl); letter-spacing: -.02em; } html body:not(#fa) legend .step-n { font-family: var(--f-mono); font-weight: 500; font-size: var(--t-xs); color: var(--red); letter-spacing: .08em; } html body:not(#fa) .form--creator legend .step-n { color: var(--lilac-deep); } html body:not(#fa) .fields { display: grid; gap: 16px; } html body:not(#fa) .field { display: grid; gap: 7px; min-width: 0; } html body:not(#fa) .field > label, html body:not(#fa) .field > .label { font-weight: 600; font-size: var(--t-sm); display: flex; justify-content: space-between; gap: 8px; } html body:not(#fa) .field .opt { font-weight: 400; color: var(--muted); font-size: var(--t-xs); } html body:not(#fa) .field .hint { font-size: var(--t-xs); color: var(--muted); } html body:not(#fa) .field input[type="text"], html body:not(#fa) .field input[type="email"], html body:not(#fa) .field input[type="tel"], html body:not(#fa) .field input[type="url"], html body:not(#fa) .field input[type="number"], html body:not(#fa) .field select, html body:not(#fa) .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font-size: 16px; transition: border-color .2s, background .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; } html body:not(#fa) .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23625A5C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; } html body:not(#fa) .field textarea { min-height: 110px; resize: vertical; } html body:not(#fa) .field input:hover, html body:not(#fa) .field select:hover, html body:not(#fa) .field textarea:hover { border-color: #CFC6C3; } html body:not(#fa) .field input:focus, html body:not(#fa) .field select:focus, html body:not(#fa) .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 4px rgba(18,16,17,.06); } html body:not(#fa) .field.invalid input, html body:not(#fa) .field.invalid select, html body:not(#fa) .field.invalid textarea { border-color: var(--red); background: var(--white); } html body:not(#fa) .field .err { display: none; color: var(--red); font-size: var(--t-xs); font-weight: 600; } html body:not(#fa) .field.invalid .err { display: block; } html body:not(#fa) .prefix { position: relative; } html body:not(#fa) .prefix span { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--muted); font-weight: 600; pointer-events: none; } html body:not(#fa) .prefix input { padding-left: 32px !important; } html body:not(#fa) .chips { display: flex; flex-wrap: wrap; gap: 8px; } html body:not(#fa) .chip { position: relative; } html body:not(#fa) .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } html body:not(#fa) .chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); font-size: var(--t-sm); font-weight: 550; cursor: pointer; transition: background .2s, border-color .2s, color .2s; user-select: none; } html body:not(#fa) .chip span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #C9C0BD; transition: background .2s, border-color .2s, box-shadow .2s; } html body:not(#fa) .chip input[type="checkbox"] + span::before { border-radius: 4px; } html body:not(#fa) .chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); } html body:not(#fa) .chip input:checked + span::before { background: var(--red-hot); border-color: var(--red-hot); box-shadow: inset 0 0 0 2px var(--ink); } html body:not(#fa) .form--creator .chip input:checked + span::before { background: var(--lilac); border-color: var(--lilac); } html body:not(#fa) .chip input:focus-visible + span { outline: 2.5px solid var(--red); outline-offset: 2px; } html body:not(#fa) .field.invalid .chip span { border-color: #F2B5B8; } html body:not(#fa) .range-out { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink); } html body:not(#fa) .upload { position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 22px 16px; border-radius: 16px; border: 1.5px dashed #CFC6C3; background: var(--paper); cursor: pointer; transition: border-color .2s, background .2s; } html body:not(#fa) .upload:hover, html body:not(#fa) .upload.drag { border-color: var(--lilac-deep); background: var(--lilac-soft); } html body:not(#fa) .upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } html body:not(#fa) .upload svg { width: 26px; height: 26px; color: var(--lilac-deep); } html body:not(#fa) .upload b { font-size: var(--t-sm); } html body:not(#fa) .upload span { font-size: var(--t-xs); color: var(--muted); } html body:not(#fa) .upload-file { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--lilac-soft); font-size: var(--t-sm); } html body:not(#fa) .upload-file.show { display: flex; } html body:not(#fa) .upload-file button { border: 0; background: none; color: var(--lilac-deep); font-weight: 650; cursor: pointer; } html body:not(#fa) .consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: var(--t-sm); color: var(--muted); } html body:not(#fa) .consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--red); } html body:not(#fa) .form--creator .consent input { accent-color: var(--lilac-deep); } html body:not(#fa) .form-foot { display: grid; gap: 14px; padding-top: 6px; border-top: 1px solid var(--line); } html body:not(#fa) .form-foot .btn { width: 100%; } html body:not(#fa) .form-error { display: none; padding: 12px 14px; border-radius: 12px; background: var(--red-soft); color: #8C1219; font-size: var(--t-sm); font-weight: 600; } html body:not(#fa) .form-error.show { display: block; } html body:not(#fa) .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } html body:not(#fa) .demo-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #FFF3D6; color: #5A4300; font-size: var(--t-xs); line-height: 1.5; } html body:not(#fa) .demo-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } html body:not(#fa) .success { display: grid; gap: 22px; animation: fade-up .6s var(--ease) both; } html body:not(#fa) .success-head { display: grid; gap: 12px; } html body:not(#fa) .success-tick { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--ink); color: var(--white); animation: pop .6s var(--ease); } html body:not(#fa) .success-tick svg { width: 30px; height: 30px; } @keyframes pop { from { transform: scale(.5); opacity: 0; } } html body:not(#fa) .success h2 { font-size: var(--t-2xl); } html body:not(#fa) .success p { color: var(--muted); } html body:not(#fa) .next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ns; } html body:not(#fa) .next-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px; border-radius: 16px; background: var(--paper); font-size: var(--t-sm); color: var(--muted); } html body:not(#fa) .next-steps li::before { counter-increment: ns; content: counter(ns); width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--white); font-family: var(--f-display); font-weight: 800; color: var(--ink); } html body:not(#fa) .next-steps b { display: block; color: var(--ink); font-size: var(--t-md); } html body:not(#fa) .summary { border-radius: 16px; border: 1px solid var(--line); overflow: hidden; } html body:not(#fa) .summary dl { margin: 0; display: grid; } html body:not(#fa) .summary div { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); } html body:not(#fa) .summary div:last-child { border-bottom: 0; } html body:not(#fa) .summary dt { color: var(--muted); } html body:not(#fa) .summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } html body:not(#fa) .success-actions { display: grid; gap: 10px; } html body:not(#fa) .dev-payload summary { cursor: pointer; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } html body:not(#fa) .dev-payload pre { margin: 10px 0 0; max-height: 280px; overflow: auto; padding: 14px; border-radius: 12px; background: var(--ink); color: #E8E2E0; font-size: 12px; line-height: 1.5; } @supports (animation-timeline: view()) { html body:not(#fa) .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; } @keyframes reveal { from { opacity: .001; transform: translateY(28px); } } } @media (min-width: 640px) { :root { --gutter: 28px; } html body:not(#fa) .hero-ctas { display: flex; flex-wrap: wrap; } html body:not(#fa) .journeys { grid-template-columns: repeat(3, 1fr); } html body:not(#fa) .why { grid-template-columns: 1fr 1fr; } html body:not(#fa) .quotes { grid-template-columns: repeat(3, 1fr); } html body:not(#fa) .final { grid-template-columns: 1fr 1fr; } html body:not(#fa) .fields--2 { grid-template-columns: 1fr 1fr; } html body:not(#fa) .form-card { padding: 36px 32px; } html body:not(#fa) .form-foot { grid-template-columns: 1fr auto; align-items: center; } html body:not(#fa) .form-foot .btn { width: auto; } html body:not(#fa) .success-actions { display: flex; flex-wrap: wrap; } html body:not(#fa) .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } html body:not(#fa) .foot-about { grid-column: auto; } html body:not(#fa) .logo small { display: inline; } } @media (min-width: 960px) { html body:not(#fa) .band { padding-block: 80px; } html body:not(#fa) .band--tight { padding-top: 0; } html body:not(#fa) .section-head { margin-bottom: 40px; } html body:not(#fa) .nav { display: flex; } html body:not(#fa) .menu-btn { display: none; } html body:not(#fa) .head-actions .btn { display: inline-flex; } html body:not(#fa) .drawer { display: none; } html body:not(#fa) .hero { padding-block: 44px 96px; } html body:not(#fa) .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; } html body:not(#fa) .section-head--split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; } html body:not(#fa) .services-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } html body:not(#fa) .services-layout .section-head { position: sticky; top: calc(var(--header-h) + 40px); } html body:not(#fa) .network-top { grid-template-columns: 1.1fr .9fr; align-items: end; } html body:not(#fa) .steps { grid-template-columns: repeat(5, 1fr); } html body:not(#fa) .step { grid-template-columns: 1fr; align-content: start; } html body:not(#fa) .why { grid-template-columns: repeat(4, 1fr); } html body:not(#fa) .network-foot { grid-template-columns: 1fr auto; } html body:not(#fa) .journey-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; } html body:not(#fa) .journey-layout .aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; } html body:not(#fa) .form-card { padding: 44px 44px; } html body:not(#fa) .final-card { padding: 56px 48px; } } @media (max-width: 639px) { html body:not(#fa) .creators, html body:not(#fa) .work, html body:not(#fa) .quotes { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; scroll-padding-inline: var(--gutter); } html body:not(#fa) .creators::-webkit-scrollbar, html body:not(#fa) .work::-webkit-scrollbar, html body:not(#fa) .quotes::-webkit-scrollbar { display: none; } html body:not(#fa) .creators > *, html body:not(#fa) .work > *, html body:not(#fa) .quotes > * { scroll-snap-align: start; animation: none !important; } html body:not(#fa) .final-card { padding: 28px 22px; } html body:not(#fa) .journey { padding: 20px; gap: 10px; } html body:not(#fa) .service-head { padding: 16px; gap: 12px; } html body:not(#fa) .service-inner { padding: 0 16px 18px; } html body:not(#fa) p.swipe-hint { display: flex; } html body:not(#fa) .network-facts { grid-template-columns: 1fr; gap: 8px; } html body:not(#fa) .fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; } html body:not(#fa) .fact b { font-size: 1.35rem; } html body:not(#fa) .fact span { text-align: right; } } html body:not(#fa) .swipe-hint { display: none; align-items: center; gap: 6px; margin: 4px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } html body:not(#fa) .swipe-hint::after { content: "→"; animation: nudge 1.6s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateX(4px); } } html body:not(#fa) .band.page-hero { padding-block: 32px 44px; } @media (min-width: 960px) { html body:not(#fa) .band.page-hero { padding-block: 44px 56px; } } html body:not(#fa) .field > label.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; justify-content: start; align-items: start; font-weight: 400; font-size: var(--t-sm); color: var(--muted); cursor: pointer; } html body:not(#fa) .consent input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid #BDB4B1; border-radius: 6px; background: var(--white); display: grid; place-content: center; cursor: pointer; transition: background .2s, border-color .2s; } html body:not(#fa) .consent input::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .15s var(--ease); } html body:not(#fa) .consent input:hover { border-color: var(--ink); } html body:not(#fa) .consent input:checked { background: var(--red); border-color: var(--red); } html body:not(#fa) .form--creator .consent input:checked { background: var(--lilac-deep); border-color: var(--lilac-deep); } html body:not(#fa) .consent input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); } html body:not(#fa) .consent input:focus-visible { outline: 2.5px solid var(--red); outline-offset: 2px; } html body:not(#fa) .field.invalid .consent input { border-color: var(--red); } html body:not(#fa) .wa-float { position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 16px; border-radius: 999px; background: var(--green); color: #fff; text-decoration: none; font-weight: 700; font-size: var(--t-sm); box-shadow: 0 14px 30px -12px rgba(31,168,85,.7); transition: transform .25s var(--ease), box-shadow .25s; } html body:not(#fa) .wa-float:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -12px rgba(31,168,85,.8); } html body:not(#fa) .wa-float svg { width: 24px; height: 24px; flex: none; } html body:not(#fa) .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--green); animation: wa-ring 2.4s ease-out infinite; } @keyframes wa-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } } html body:not(#fa) .wa-float span { display: none; } @media (min-width: 640px) { html body:not(#fa) .wa-float span { display: inline; } } @media (max-width: 639px) { html body:not(#fa) .wa-float { width: 56px; padding: 0; justify-content: center; } } html body:not(#fa).menu-open .wa-float { display: none; } html body:not(#fa) .stage-inner .site { translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -10px); } html body:not(#fa) .stage-inner .phone { translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 8px); } html body:not(#fa) .stage-inner .grow { translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * 12px); } html body:not(#fa) .stage-inner .site, html body:not(#fa) .stage-inner .phone, html body:not(#fa) .stage-inner .grow { transition: translate .4s var(--ease); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } html body:not(#fa) .e-con.fa-sec, html body:not(#fa) .e-con.wrap { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --content-width: 100%; } html body:not(#fa) .e-con.fa-sec { width: 100%; max-width: 100%; } html body:not(#fa) .fa-sec > .elementor-widget, html body:not(#fa) .fa-sec > .e-con { width: 100%; max-width: 100%; margin: 0; } html body:not(#fa) .fa-sec > .elementor-widget-html > .elementor-widget-container { margin: 0; padding: 0; } html body:not(#fa) .e-con.wrap { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; } html body:not(#fa) .elementor-location-header { position: sticky; top: 0; z-index: 50; } html body:not(#fa) .admin-bar .elementor-location-header { top: 32px; } html body:not(#fa) .fa-header { position: relative; top: 0; padding-top: env(safe-area-inset-top, 0px); } html body:not(#fa) figcaption { font-style: normal; font-size: inherit; text-align: inherit; color: inherit; margin: 0; } @media (max-width: 782px) { html body:not(#fa) .admin-bar .elementor-location-header { top: 0; } html body:not(#fa) .admin-bar .drawer { top: calc(var(--header-h) + 46px); } } /* ---- Blog (from v2) ---- */ html body:not(#fa) .section { padding-block: 80px; } html body:not(#fa) .ink { background: var(--ink); color: var(--on-ink); } html body:not(#fa) .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--red); } html body:not(#fa) .ink .eyebrow { color: var(--red-hot); } html body:not(#fa) .eyebrow::before { content: ""; width: 18px; height: 1.5px; background: currentColor; } html body:not(#fa) .ink .head p { color: var(--on-ink-muted); } html body:not(#fa) .red-text { color: var(--red); } html body:not(#fa) .ink .red-text { color: var(--red-hot); } @keyframes shine { 0%, 70% { transform: translateX(-110%); } 100% { transform: translateX(110%); } } @keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(31,168,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,168,85,0); } } @keyframes lineUp { from { transform: translateY(105%); } } @keyframes swapWord { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-60%); opacity: 0; } 55% { transform: translateY(60%); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes draw { from { stroke-dashoffset: 300; } } @keyframes fadeUp { from { opacity: .001; transform: translateY(18px); } } @keyframes breathe { 50% { transform: scale(1.15); opacity: .75; } } @keyframes floaty { 50% { transform: translateY(-10px) rotate(-1deg); } } @keyframes phoneIn { from { opacity: .001; transform: translateY(40px) scale(.94); } } @keyframes paint { 0% { opacity: 0; transform: translateY(8px) scale(.98); } 9%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } } @keyframes tap { 0%, 30% { opacity: 0; transform: translate(40px, 60px); } 36% { opacity: 1; transform: none; } 39% { transform: scale(.75); } 42% { transform: scale(1); opacity: 1; } 47%, 100% { opacity: 0; } } @keyframes bob { 50% { transform: translateY(-8px); } } @supports (animation-timeline: view()) { @keyframes revealX { from { opacity: .001; transform: translateX(-30px); } } } @keyframes oldMarq { to { transform: translateX(-100%); } } @keyframes blink { to { visibility: hidden; } } @keyframes miniScroll { 0%, 14% { transform: translateY(0); } 86%, 100% { transform: translateY(-52.38%); } } @keyframes countPop { 40% { transform: scale(1.18); color: var(--red); } } @keyframes hint { 50% { transform: translateX(10px); } } @supports (animation-timeline: view()) { @keyframes grow { from { transform: scaleY(0); } } } html body:not(#fa) .read-more { font-weight: 650; font-size: var(--t-sm); display: inline-flex; gap: 6px; align-items: center; } html body:not(#fa) .read-more::after { content: "→"; transition: transform .25s var(--ease); } html body:not(#fa) .post-card:hover .read-more::after { transform: translateX(4px); } html body:not(#fa) .lead { position: relative; overflow: hidden; border-radius: 30px; background: var(--ink); color: var(--on-ink); padding: 36px 22px; display: grid; gap: 32px; } html body:not(#fa) .lead::before { content: ""; position: absolute; width: 520px; aspect-ratio: 1; right: -260px; top: -260px; border-radius: 50%; border: 2px solid var(--red); opacity: .55; animation: spin 50s linear infinite; border-style: dashed; } html body:not(#fa) .lead::after { content: ""; position: absolute; width: 360px; height: 360px; left: -180px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(224,37,46,.45), transparent 65%); } html body:not(#fa) .lead > * { position: relative; z-index: 1; } html body:not(#fa) .lead-copy { display: grid; gap: 16px; align-content: start; } html body:not(#fa) .lead-copy h2 { font-size: var(--t-2xl); font-weight: 800; } html body:not(#fa) .lead-copy p { color: var(--on-ink-muted); font-size: var(--t-lg); } @keyframes popIn { from { transform: scale(.4); opacity: 0; } } html body:not(#fa) .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); } @supports (animation-timeline: scroll()) { html body:not(#fa) .progress { animation: prog linear both; animation-timeline: scroll(root); } @keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } } } html body:not(#fa) .article-hero { padding-block: 28px 0; } html body:not(#fa) .article-hero h1 { font-size: clamp(2.1rem, 1.3rem + 3.8vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; max-width: 18ch; animation: fadeUp .8s var(--ease) both; } html body:not(#fa) .article-hero .dek { margin-top: 18px; font-size: var(--t-lg); color: var(--muted); max-width: 52ch; animation: fadeUp .8s var(--ease) .1s both; } html body:not(#fa) .article-cover { margin-top: 32px; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; } html body:not(#fa) .prose { min-width: 0; max-width: 68ch; font-size: 1.125rem; line-height: 1.75; } html body:not(#fa) .prose > * + * { margin-top: 1.1em; } html body:not(#fa) .prose h2 { font-size: var(--t-xl); font-weight: 800; margin-top: 2em; scroll-margin-top: 90px; } html body:not(#fa) .prose h3 { font-size: var(--t-lg); font-weight: 700; margin-top: 1.6em; } html body:not(#fa) .prose ul, html body:not(#fa) .prose ol { padding-left: 1.2em; } html body:not(#fa) .prose li + li { margin-top: .45em; } html body:not(#fa) .prose li::marker { color: var(--red); font-weight: 700; } html body:not(#fa) .prose strong { font-weight: 700; } html body:not(#fa) .prose .lead-para { font-size: 1.25rem; line-height: 1.6; color: var(--ink); } html body:not(#fa) .callout { border-radius: 18px; background: var(--red-soft); padding: 20px 22px; display: grid; gap: 6px; } html body:not(#fa) .callout b { font-family: var(--f-display); font-size: var(--t-lg); } html body:not(#fa) .inline-cta { border-radius: 22px; background: var(--ink); color: var(--on-ink); padding: 26px 22px; display: grid; gap: 14px; margin-block: 2em !important; position: relative; overflow: hidden; } html body:not(#fa) .inline-cta::after { content: ""; position: absolute; width: 240px; aspect-ratio: 1; right: -110px; bottom: -130px; border-radius: 50%; border: 2px dashed var(--red-hot); opacity: .6; animation: spin 40s linear infinite; } html body:not(#fa) .inline-cta h3 { font-size: var(--t-xl); margin: 0; } html body:not(#fa) .inline-cta p { color: var(--on-ink-muted); font-size: var(--t-md); } html body:not(#fa) .inline-cta .btn { justify-self: start; position: relative; z-index: 1; } html body:not(#fa) .checklist { list-style: none; padding: 0 !important; display: grid; gap: 10px; } html body:not(#fa) .checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); margin: 0 !important; } html body:not(#fa) .checklist li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: var(--white); display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-top: 3px; } html body:not(#fa) .blog-hero { padding-block: 36px 48px; } html body:not(#fa) .blog-hero h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; animation: fadeUp .8s var(--ease) both; } html body:not(#fa) .blog-hero p { margin-top: 18px; font-size: var(--t-lg); color: var(--on-ink-muted); max-width: 46ch; animation: fadeUp .8s var(--ease) .1s both; } @media (min-width: 640px) { html body:not(#fa) .lead { padding: 48px 40px; } } @media (min-width: 960px) { html body:not(#fa) .section { padding-block: 120px; } html body:not(#fa) .lead { grid-template-columns: 1fr 1fr; padding: 72px 64px; gap: 64px; align-items: center; } } @keyframes dayIn { from { opacity: .001; transform: scale(.5); } } html body:not(#fa) .prose h2 { scroll-margin-top: 16px; } html body:not(#fa) .article-hero { padding-block: 28px 0; } html body:not(#fa) .article-hero .elementor-widget-theme-post-title h1, html body:not(#fa) .article-hero h1.elementor-heading-title { font-family: var(--f-display); font-size: clamp(2.1rem, 1.3rem + 3.8vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; max-width: 18ch; color: var(--ink); } html body:not(#fa) .article-hero .dek, html body:not(#fa) .article-hero .dek p { margin-top: 18px; font-size: var(--t-lg); color: var(--muted); max-width: 52ch; line-height: 1.55; } html body:not(#fa) .fa-meta { margin-top: 22px; } html body:not(#fa) .fa-meta .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } html body:not(#fa) .fa-meta .elementor-icon-list-icon { display: none; } html body:not(#fa) .fa-meta .elementor-icon-list-text, html body:not(#fa) .fa-meta a { color: var(--muted); } html body:not(#fa) .article-cover { margin-top: 32px; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); } html body:not(#fa) .article-cover .elementor-widget-container, html body:not(#fa) .article-cover a, html body:not(#fa) .article-cover img { display: block; width: 100%; height: 100%; } html body:not(#fa) .article-cover img { object-fit: cover; border-radius: 0; } html body:not(#fa) .fa-article { padding-block: 48px 0; } html body:not(#fa) .prose .wp-block-list, html body:not(#fa) .prose ul, html body:not(#fa) .prose ol { padding-left: 1.2em; } html body:not(#fa) .prose img { border-radius: 16px; } html body:not(#fa) .fa-posts { padding-block: 48px 80px; } html body:not(#fa) .fa-posts .elementor-posts-container { display: grid; grid-template-columns: 1fr; gap: 18px; } html body:not(#fa) .fa-posts .elementor-post { margin: 0; } html body:not(#fa) .fa-posts .elementor-post__card { border-radius: 22px; border: 1px solid var(--line); background: var(--white); box-shadow: none; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); height: 100%; } html body:not(#fa) .fa-posts .elementor-post__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } html body:not(#fa) .fa-posts .elementor-post__thumbnail__link { margin: 0; } html body:not(#fa) .fa-posts .elementor-post__thumbnail { padding-bottom: 56.25%; } html body:not(#fa) .fa-posts .elementor-post__thumbnail img { transition: transform .6s var(--ease); } html body:not(#fa) .fa-posts .elementor-post__card:hover .elementor-post__thumbnail img { transform: translate(-50%, -50%) scale(1.04); } html body:not(#fa) .fa-posts .elementor-post__badge { background: var(--red); color: var(--white); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; margin: 16px; } html body:not(#fa) .fa-posts .elementor-post__text { padding: 22px 22px 0; } html body:not(#fa) .fa-posts .elementor-post__title, html body:not(#fa) .fa-posts .elementor-post__title a { font-family: var(--f-display); font-weight: 800; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.025em; color: var(--ink); margin: 0 0 10px; } html body:not(#fa) .fa-posts .elementor-post__excerpt p { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; margin: 0 0 14px; } html body:not(#fa) .fa-posts .elementor-post__read-more { color: var(--red); font-weight: 650; font-size: var(--t-sm); } html body:not(#fa) .fa-posts .elementor-post__meta-data { border-top: 1px solid var(--line); padding: 14px 22px; margin-top: 16px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } html body:not(#fa) .fa-posts .elementor-post__avatar { display: none; } @media (min-width: 640px) { html body:not(#fa) .fa-posts .elementor-posts-container { grid-template-columns: 1fr 1fr; } } html body:not(#fa) .fa-posts .elementor-posts-nothing-found { color: var(--muted); } html body:not(#fa) .blog-hero .elementor-widget-theme-archive-title { margin-top: 16px; } html body:not(#fa) .blog-hero .elementor-heading-title { font-family: var(--f-display); color: var(--white); } html body:not(#fa) .fa-wa-btn .elementor-button, html body:not(#fa) .fa-wa-btn .elementor-button:hover { background: var(--green); } html body:not(#fa) .fa-wa-btn.elementor-align-justify .elementor-button { width: 100%; justify-content: center; } html body:not(#fa) .prose .elementor-icon-list-icon i { color: var(--red); } html body:not(#fa) .prose .elementor-icon-list-icon svg { fill: var(--red); } html body:not(#fa) .prose .elementor-icon-box-title, html body:not(#fa) .prose .elementor-image-box-title, html body:not(#fa) .prose .elementor-flip-box__layer__title, html body:not(#fa) .prose .elementor-cta__title, html body:not(#fa) .prose .elementor-price-table__heading { font-family: var(--f-display); letter-spacing: -.01em; } html body:not(#fa) .prose .elementor-icon-box-description, html body:not(#fa) .prose .elementor-image-box-description { color: var(--muted); } html body:not(#fa) .prose { max-width: 780px; } html body:not(#fa) .prose p { margin: 0 0 1.1em; } html body:not(#fa) .prose ul, html body:not(#fa) .prose ol { margin: 0 0 1.1em; } html body:not(#fa) .prose h2 { margin: 1.6em 0 .5em; } html body:not(#fa) .prose h3 { margin: 1.3em 0 .4em; } html body:not(#fa) .prose .elementor-widget-heading h2, html body:not(#fa) .prose .elementor-widget-heading h3 { margin: .6em 0 0; } html body:not(#fa) .prose .callout, html body:not(#fa) .prose .inline-cta, html body:not(#fa) .prose .checklist { margin-block: 1.6em; } html body:not(#fa) .prose .callout p, html body:not(#fa) .prose .inline-cta p { margin: 0; } html body:not(#fa) .prose .e-con { --widgets-spacing: 16px; } html body:not(#fa) .prose img { border-radius: 16px; } html body:not(#fa) .e-con.fa-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 48px 0; align-items: start; } html body:not(#fa) .e-con.fa-main { min-width: 0; display: block; } html body:not(#fa) .e-con.fa-sidebar { display: flex; flex-direction: column; gap: 20px; align-self: stretch; } @media (max-width: 1023px) { html body:not(#fa) .e-con.fa-sidebar { order: -1; } html body:not(#fa) .e-con.fa-article { gap: 28px; } } @media (min-width: 1024px) { html body:not(#fa) .e-con.fa-article { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; } html body:not(#fa) .fa-side-sticky { position: sticky; top: 96px; } html body:not(#fa) .admin-bar .fa-side-sticky { top: 128px; } } html body:not(#fa) .e-con.fa-side-card { --padding-top: 22px; --padding-right: 22px; --padding-bottom: 22px; --padding-left: 22px; --gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; } html body:not(#fa) .fa-side-card .elementor-heading-title { font-size: var(--t-lg); font-weight: 800; color: var(--ink); } html body:not(#fa) .inline-cta .elementor-heading-title { color: var(--on-ink); } html body:not(#fa) .fa-side-card .elementor-widget-text-editor { font-size: var(--t-sm); color: var(--muted); } html body:not(#fa) .fa-toc .elementor-toc { border: 0; padding: 0; background: transparent; } html body:not(#fa) .fa-toc .elementor-toc__header { padding: 0 0 10px; border: 0; } html body:not(#fa) .fa-toc .elementor-toc__header-title { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } html body:not(#fa) .fa-toc .elementor-toc__body { padding: 0; } html body:not(#fa) .fa-toc .elementor-toc__list-wrapper { margin: 0; padding: 0; list-style: none; } html body:not(#fa) .fa-toc .elementor-toc__list-item { margin: 0; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); } html body:not(#fa) .fa-toc .elementor-toc__list-item-text, html body:not(#fa) .fa-toc .elementor-toc__list-item-text a { color: var(--muted); font-size: var(--t-sm); line-height: 1.35; text-decoration: none; } html body:not(#fa) .fa-toc .elementor-toc__list-item-text:hover, html body:not(#fa) .fa-toc .elementor-item-active { color: var(--ink); } html body:not(#fa) .fa-toc .elementor-toc__list-item:has(.elementor-item-active) { border-left-color: var(--red); } html body:not(#fa) .fa-toc .elementor-toc__list-item-text-wrapper::before, html body:not(#fa) .fa-toc .elementor-toc__list-item-text-wrapper i { display: none; } html body:not(#fa) .e-con.fa-share { --gap: 14px; --row-gap: 14px; --column-gap: 14px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); } html body:not(#fa) .fa-share > .elementor-widget-heading { margin-bottom: 0; } html body:not(#fa) .fa-share .elementor-heading-title { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } html body:not(#fa) .fa-share-btns .elementor-grid { display: flex; flex-wrap: wrap; gap: 10px; } html body:not(#fa) .fa-share-btns .elementor-grid-item { margin: 0; padding: 0; width: auto; } html body:not(#fa) .fa-share-btns .elementor-share-btn { --c: var(--ink); display: inline-flex; align-items: center; gap: 10px; height: 46px; width: auto; padding: 0 18px 0 6px; border-radius: 14px; overflow: hidden; background: var(--white); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: background .25s var(--ease), border-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s; font-size: 15px; } html body:not(#fa) .fa-share-btns .elementor-share-btn__icon { flex: none; align-self: center; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; line-height: 1; position: static; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); transition: background .25s, color .25s; } html body:not(#fa) .fa-share-btns .elementor-share-btn__icon i, html body:not(#fa) .fa-share-btns .elementor-share-btn__icon svg { display: block; margin: 0; font-size: 17px; width: 17px; height: 17px; line-height: 1; fill: currentColor; color: inherit; align-self: center; } html body:not(#fa) .fa-share-btns .elementor-share-btn__text { padding: 0; background: none; display: flex; align-items: center; height: 100%; } html body:not(#fa) .fa-share-btns .elementor-share-btn__title { font-family: var(--f-body); font-weight: 600; font-size: 14px; color: inherit; text-transform: none; letter-spacing: 0; } html body:not(#fa) .fa-share-btns .elementor-share-btn_whatsapp { --c: #1FA855; } html body:not(#fa) .fa-share-btns .elementor-share-btn_facebook { --c: #1877F2; } html body:not(#fa) .fa-share-btns .elementor-share-btn_linkedin { --c: #0A66C2; } html body:not(#fa) .fa-share-btns .elementor-share-btn_x-twitter, html body:not(#fa) .fa-share-btns .elementor-share-btn_twitter { --c: #121011; } html body:not(#fa) .fa-share-btns .elementor-share-btn:hover { background: var(--c); border-color: var(--c); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--c); } html body:not(#fa) .fa-share-btns .elementor-share-btn:hover .elementor-share-btn__icon { background: rgba(255,255,255,.18); color: var(--white); } html body:not(#fa) .fa-toc, html body:not(#fa) .fa-toc .elementor-widget-container, html body:not(#fa) .fa-toc .elementor-toc { --box-border-width: 0px; --box-padding: 0px; --box-background-color: transparent; border: 0; padding: 0; background: transparent; box-shadow: none; } html body:not(#fa) .fa-toc ul, html body:not(#fa) .fa-toc li { list-style: none; } html body:not(#fa) .fa-toc .elementor-toc__list-item-text-wrapper { display: block; } html body:not(#fa) .fa-toc .elementor-toc__list-item-text-wrapper::before, html body:not(#fa) .fa-toc .elementor-toc__list-item-text-wrapper > i, html body:not(#fa) .fa-toc .elementor-toc__list-item-text-wrapper > svg { display: none; content: none; } html body:not(#fa) .fa-toc .elementor-toc__toggle-button { display: none; } @media (min-width: 1024px) { html body:not(#fa) .fa-side-sticky { max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin; } } html body:not(#fa) .prose .elementor-counter-number-wrapper { font-family: var(--f-display); font-weight: 800; color: var(--ink); font-size: 42px; letter-spacing: -.03em; } html body:not(#fa) .prose .elementor-counter-title { color: var(--muted); font-size: var(--t-sm); } html body:not(#fa) .prose .elementor-icon { color: var(--red); } html body:not(#fa) .prose .elementor-icon svg { fill: var(--red); } html body:not(#fa) .prose .elementor-progress-wrapper { background: var(--line); border-radius: 999px; } html body:not(#fa) .prose .elementor-progress-bar { background: var(--red); border-radius: 999px; } html body:not(#fa) .prose .elementor-star-rating i::before { color: #E8A317; } html body:not(#fa) .prose .elementor-alert.elementor-alert-info { background: #EEF4FF; border-color: #7EA2E8; border-radius: 14px; } html body:not(#fa) .prose .elementor-tab-title, html body:not(#fa) .prose .elementor-toggle-title, html body:not(#fa) .prose .elementor-accordion-title { font-family: var(--f-body); font-weight: 650; } html body:not(#fa) .prose .elementor-blockquote__content { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.3; color: var(--ink); } html body:not(#fa) .prose .elementor-widget-image-gallery .gallery-item img, html body:not(#fa) .prose .elementor-image-carousel img { border-radius: 12px; } html body:not(#fa) .prose .elementor-widget-google_maps iframe, html body:not(#fa) .prose .elementor-widget-video .elementor-wrapper { border-radius: 16px; overflow: hidden; } html body:not(#fa) .post-back { margin-top: 32px; }