/* Layout de la LP WeYouAds, limitado aos estilos usados nesta página. */
@layer properties {
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; }
}
}
@layer theme {
:root, :host { --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-red-100: oklch(93.6% .032 17.717); --color-red-500: oklch(63.7% .237 25.331); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-900: oklch(20.8% .042 265.755); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-sm: 24rem; --container-lg: 32rem; --container-2xl: 42rem; --text-xs: .75rem; --text-xs--line-height: calc(1/.75); --text-sm: .875rem; --text-sm--line-height: calc(1.25/.875); --text-base: 1rem; --text-base--line-height: 1.5; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75/1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75/1.25); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5/2.25); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --tracking-tight: -.025em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-xs: .125rem; --ease-out: cubic-bezier(0,0,.2,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite; --blur-sm: 8px; --blur-2xl: 40px; --aspect-video: 16/9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4,0,.2,1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-border: var(--border); }
}
@layer base {
*, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
html, :host { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
summary { display: list-item; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
::file-selector-button { margin-inline-end: 4px; }
::placeholder { opacity: 1; }
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder { color: currentcolor; }
@supports (color:color-mix(in lab,red,red)) {
::placeholder { color: color-mix(currentcolor, transparent); }
}
}
::-webkit-search-decoration { appearance: none; }
::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
::-webkit-datetime-edit { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper { padding: 0px; }
::-webkit-datetime-edit { padding-block: 0px; }
::-webkit-datetime-edit-year-field { padding-block: 0px; }
::-webkit-datetime-edit-month-field { padding-block: 0px; }
::-webkit-datetime-edit-day-field { padding-block: 0px; }
::-webkit-datetime-edit-hour-field { padding-block: 0px; }
::-webkit-datetime-edit-minute-field { padding-block: 0px; }
::-webkit-datetime-edit-second-field { padding-block: 0px; }
::-webkit-datetime-edit-millisecond-field { padding-block: 0px; }
::-webkit-datetime-edit-meridiem-field { padding-block: 0px; }
::-webkit-calendar-picker-indicator { line-height: 1; }
button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
::file-selector-button { appearance: button; }
::-webkit-inner-spin-button { height: auto; }
::-webkit-outer-spin-button { height: auto; }
* { border-color: var(--border); outline-color: var(--ring); }
@supports (color:color-mix(in lab,red,red)) {
* { outline-color: color-mix(in oklab,var(--ring)50%,transparent); }
}
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { background-color: var(--background); color: var(--foreground); font-synthesis: none; min-width: 320px; text-rendering: optimizelegibility; margin: 0px; font-family: "DM Sans", sans-serif; }
button:not(:disabled), [role="button"]:not([aria-disabled="true"]), [type="button"]:not(:disabled), [type="submit"]:not(:disabled), [type="reset"]:not(:disabled), a[href], select:not(:disabled), input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled), summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
}
@layer components {
.container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.font-display { font-family: Manrope, sans-serif; }
.site-header { z-index: 50; backdrop-filter: blur(18px); transition: border-color .18s var(--ease-out),background-color .18s var(--ease-out); background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid rgba(0, 0, 0, 0); position: sticky; top: 0px; }
.brand-mark, .mini-logo { color: rgb(255, 255, 255); letter-spacing: -0.08em; background: rgb(15, 44, 92); justify-content: center; align-items: center; width: 29px; height: 29px; font-family: Manrope, sans-serif; font-size: 14px; font-weight: 800; display: inline-flex; }
.nav-link { color: rgb(83, 98, 115); transition: color .16s var(--ease-out); padding: 0.45rem 0px; font-size: 13px; font-weight: 700; position: relative; }
.nav-link::after { content: ""; height: 2px; transition: right .18s var(--ease-out); background: rgb(24, 119, 242); position: absolute; bottom: 1px; left: 0px; right: 100%; }
.nav-link:hover { color: rgb(15, 44, 92); }
.nav-link:hover::after { right: 0px; }
.button-primary, .button-secondary, .button-ghost, .button-coral, .button-dark-outline { min-height: 42px; transition: transform .16s var(--ease-out),background-color .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out); justify-content: center; align-items: center; gap: 0.55rem; padding: 0.72rem 1.15rem; font-size: 13px; font-weight: 800; line-height: 1; display: inline-flex; }
.button-primary { color: rgb(255, 255, 255); background: rgb(15, 44, 92); border: 1px solid rgb(15, 44, 92); }
.button-primary:hover { background: rgb(23, 59, 93); border-color: rgb(23, 59, 93); }
.button-secondary { color: rgb(15, 44, 92); background: rgba(255, 255, 255, 0.4); border: 1px solid rgb(189, 199, 209); }
.button-secondary:hover { background: rgb(255, 255, 255); border-color: rgb(15, 44, 92); }
.button-ghost { color: rgb(15, 44, 92); }
.button-ghost:hover { background: rgb(233, 240, 247); }
.button-coral { color: rgb(23, 24, 26); background: rgb(24, 119, 242); border: 1px solid rgb(24, 119, 242); }
.button-coral:hover { background: rgb(22, 111, 229); border-color: rgb(22, 111, 229); }
.button-dark-outline { color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.25); }
.button-dark-outline:hover { background: rgba(255, 255, 255, 0.06); border-color: rgb(255, 255, 255); }
.button-primary:active, .button-secondary:active, .button-ghost:active, .button-coral:active, .button-dark-outline:active, .menu-button:active { transform: scale(0.97); }
.button-large { min-height: 52px; padding-left: 1.35rem; padding-right: 1.35rem; font-size: 14px; }
.mobile-menu { background: rgb(255, 255, 255); border-top: 1px solid rgb(220, 226, 232); padding: 1rem 1.25rem 1.3rem; }
.hero-section { background: rgb(255, 255, 255); position: relative; overflow: hidden; }
.hero-grid-pattern { pointer-events: none; background-image: linear-gradient(rgba(15, 44, 92, 0.035) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(15, 44, 92, 0.035) 1px, rgba(0, 0, 0, 0) 1px); background-size: 48px 48px; position: absolute; inset: 0px; mask-image: linear-gradient(rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 94%); }
.hero-kicker { color: rgb(15, 44, 92); letter-spacing: 0.14em; text-transform: uppercase; align-items: center; gap: 0.65rem; font-size: 11px; font-weight: 800; display: inline-flex; }
.hero-title { letter-spacing: -0.068em; color: rgb(15, 44, 92); max-width: 670px; margin-top: 1.6rem; font-family: Manrope, sans-serif; font-size: clamp(3.2rem, 5.45vw, 5.8rem); font-weight: 800; line-height: 0.98; }
.hero-title span { color: rgb(24, 119, 242); }
.hero-copy { color: rgb(82, 98, 118); max-width: 620px; margin-top: 1.8rem; font-size: 17px; line-height: 1.75; }
.product-stage { justify-content: center; align-items: center; min-height: 590px; display: flex; position: relative; }
.product-stage::before { content: ""; background: rgb(24, 119, 242); width: 72%; height: 72%; position: absolute; top: 9%; right: 2%; }
.product-stage::after { content: ""; border: 1px solid rgba(15, 44, 92, 0.25); width: 24%; height: 21%; position: absolute; bottom: 4%; right: -5%; }
.product-window { z-index: 2; background: rgb(255, 255, 255); border: 1px solid rgba(15, 44, 92, 0.24); width: min(100%, 680px); min-height: 420px; margin-right: 4%; position: relative; box-shadow: rgba(15, 44, 92, 0.2) 0px 30px 70px; }
.product-topbar { background: rgb(15, 44, 92); justify-content: space-between; align-items: center; height: 56px; padding: 0px 1.2rem; display: flex; }
.mini-logo { color: rgb(23, 24, 26); background: rgb(24, 119, 242); width: 25px; height: 25px; font-size: 12px; }
.product-body { grid-template-columns: 142px 1fr; min-height: 364px; display: grid; }
.product-sidebar { color: rgb(255, 255, 255); background: rgb(20, 47, 73); flex-direction: column; gap: 0.4rem; padding: 1rem 0.75rem; display: flex; }
.side-item { color: rgba(255, 255, 255, 0.52); align-items: center; gap: 0.55rem; padding: 0.65rem 0.6rem; font-size: 10px; font-weight: 600; display: flex; }
.side-item.active { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.1); }
.product-main { background: rgb(248, 250, 251); padding: 1.35rem; }
.mock-button { color: rgb(255, 255, 255); background: rgb(15, 44, 92); border: 0px; align-items: center; gap: 0.35rem; padding: 0.55rem 0.7rem; font-size: 9px; font-weight: 700; display: flex; }
.calendar-head, .calendar-grid { grid-template-columns: repeat(5, minmax(0px, 1fr)); display: grid; }
.calendar-head { color: rgb(154, 166, 180); letter-spacing: 0.12em; text-align: center; margin-top: 1.25rem; font-size: 8px; font-weight: 800; }
.calendar-head span { padding: 0.5rem 0px; }
.calendar-grid { border-top: 1px solid rgb(219, 226, 232); border-left: 1px solid rgb(219, 226, 232); }
.calendar-cell { color: rgb(138, 151, 166); background: rgb(255, 255, 255); border-bottom: 1px solid rgb(219, 226, 232); border-right: 1px solid rgb(219, 226, 232); min-height: 105px; padding: 0.45rem; font-size: 9px; }
.post { color: rgb(15, 44, 92); align-items: center; gap: 0.3rem; margin-top: 0.8rem; padding: 0.45rem 0.35rem; font-size: 7px; font-weight: 700; display: flex; }
.post.coral { background: rgb(219, 234, 254); }
.post.navy { background: rgb(219, 232, 244); }
.post.pale { background: rgb(241, 234, 223); }
.approval-float, .metric-float { z-index: 4; background: rgb(255, 255, 255); border: 1px solid rgba(15, 44, 92, 0.14); position: absolute; box-shadow: rgba(15, 44, 92, 0.16) 0px 20px 55px; }
.approval-float { width: 230px; padding: 1rem; bottom: 2%; right: -1%; transform: rotate(-1.5deg); }
.metric-float { width: 135px; padding: 0.85rem; top: 4%; left: -4%; transform: rotate(1.2deg); }
.telegram-dot { color: rgb(255, 255, 255); background: rgb(42, 171, 238); border-radius: 999px; justify-content: center; align-items: center; width: 28px; height: 28px; display: flex; }
.approval-action { color: rgb(105, 119, 138); background: rgb(237, 241, 245); justify-content: center; align-items: center; min-height: 27px; font-size: 8px; font-weight: 700; display: flex; }
.approval-action.approve { color: rgb(24, 121, 93); background: rgb(223, 245, 236); }
.proof-intro, .proof-stat { border-right: 1px solid rgb(220, 226, 232); flex-direction: column; justify-content: center; min-height: 150px; padding: 1.75rem; display: flex; }
.proof-intro { color: rgb(104, 119, 138); flex-direction: row; align-items: flex-start; gap: 0.8rem; font-size: 13px; line-height: 1.55; }
.proof-intro p { max-width: 220px; }
.proof-stat:last-child { border-right: 0px; }
.proof-stat strong { color: rgb(15, 44, 92); letter-spacing: -0.045em; font-family: Manrope, sans-serif; font-size: 30px; font-weight: 800; }
.proof-stat span { color: rgb(104, 119, 138); margin-top: 0.45rem; font-size: 11px; line-height: 1.5; }
.section-space { padding-top: 7.5rem; padding-bottom: 7.5rem; }
.section-label { color: rgb(104, 119, 138); letter-spacing: 0.17em; text-transform: uppercase; align-items: center; gap: 0.7rem; font-size: 11px; font-weight: 800; display: inline-flex; }
.section-label span { background: rgb(24, 119, 242); width: 28px; height: 2px; }
.section-label-dark { color: rgba(255, 255, 255, 0.55); }
.section-title { color: rgb(15, 44, 92); letter-spacing: -0.058em; font-family: Manrope, sans-serif; font-size: clamp(2.4rem, 4.4vw, 4.7rem); font-weight: 800; line-height: 1.02; }
.section-copy { color: rgb(104, 119, 138); font-size: 17px; line-height: 1.75; }
.feature-panel { flex-direction: column; min-height: 390px; padding: 2rem; display: flex; position: relative; overflow: hidden; }
.feature-panel::after { content: ""; opacity: 0.12; width: 150px; height: 150px; transition: transform .26s var(--ease-out); border: 1px solid; position: absolute; bottom: -45px; right: -45px; transform: rotate(12deg); }
.feature-panel:hover::after { transform: rotate(18deg) translate(-8px, -8px); }
.live-commerce-section { background: rgb(255, 255, 255); border-top: 1px solid rgb(220, 226, 232); border-bottom: 1px solid rgb(220, 226, 232); }
.new-feature-badge { color: rgb(23, 24, 26); letter-spacing: 0.14em; text-transform: uppercase; background: rgb(24, 119, 242); align-items: center; min-height: 25px; padding: 0.25rem 0.55rem; font-size: 9px; font-weight: 900; display: inline-flex; }
.live-feature-row { grid-template-columns: 40px 1fr; align-items: start; gap: 0.9rem; display: grid; }
.live-feature-row > span { color: rgb(15, 44, 92); background: rgb(233, 240, 247); justify-content: center; align-items: center; width: 40px; height: 40px; display: flex; }
.live-feature-row strong { color: rgb(15, 44, 92); font-family: Manrope, sans-serif; font-size: 14px; font-weight: 800; display: block; }
.live-feature-row p { color: rgb(104, 119, 138); margin-top: 0.25rem; font-size: 13px; line-height: 1.55; }
.live-commerce-stage { min-height: 520px; transition: transform .32s var(--ease-out),box-shadow .32s var(--ease-out); background: rgb(15, 44, 92); border: 1px solid rgba(15, 44, 92, 0.22); grid-template-columns: minmax(0px, 1.18fr) minmax(220px, 0.82fr); display: grid; box-shadow: rgba(15, 44, 92, 0.2) 0px 34px 85px; }
.live-commerce-stage:hover { transform: translateY(-6px); box-shadow: rgba(15, 44, 92, 0.25) 0px 42px 100px; }
.live-video { background: rgb(24, 119, 242); min-height: 520px; position: relative; overflow: hidden; }
.live-video-top { z-index: 4; justify-content: space-between; align-items: center; display: flex; position: absolute; top: 20px; left: 20px; right: 20px; }
.live-badge, .live-viewers { letter-spacing: 0.1em; text-transform: uppercase; align-items: center; gap: 0.4rem; min-height: 29px; padding: 0.35rem 0.55rem; font-size: 9px; font-weight: 900; display: inline-flex; }
.live-badge { color: rgb(255, 255, 255); background: rgb(15, 44, 92); }
.live-viewers { color: rgb(15, 44, 92); background: rgba(255, 255, 255, 0.9); }
.live-scene { grid-template-columns: 1.1fr 0.9fr; align-items: center; padding: 4.5rem 2rem 7rem; display: grid; position: absolute; inset: 0px; }
.live-copy { z-index: 2; position: relative; }
.live-copy span { color: rgba(23, 24, 26, 0.58); letter-spacing: 0.16em; text-transform: uppercase; font-size: 9px; font-weight: 900; display: block; }
.live-copy strong { color: rgb(15, 44, 92); letter-spacing: -0.06em; margin-top: 0.65rem; font-family: Manrope, sans-serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 0.98; display: block; }
.live-copy p { color: rgba(23, 24, 26, 0.62); max-width: 180px; margin-top: 1rem; font-size: 10px; line-height: 1.5; }
.live-product-art { height: 270px; position: relative; }
.product-platform { background: rgb(246, 231, 215); height: 47px; position: absolute; bottom: 20px; left: 5%; right: 0px; transform: skew(-10deg); box-shadow: rgba(79, 35, 23, 0.2) 0px 20px 45px; }
.bottle { z-index: 2; background: rgb(15, 44, 92); width: 64px; display: block; position: absolute; bottom: 58px; box-shadow: rgba(65, 27, 17, 0.16) 14px 20px 30px; }
.bottle::before { content: ""; background: rgb(240, 246, 255); border: 8px solid rgb(15, 44, 92); width: 30px; height: 25px; position: absolute; top: -23px; left: 50%; transform: translate(-50%); }
.bottle::after { content: "ALMA"; color: rgb(255, 255, 255); letter-spacing: 0.18em; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.32); border-bottom: 1px solid rgba(255, 255, 255, 0.32); padding: 0.45rem 0px; font-size: 7px; font-weight: 800; position: absolute; top: 45%; left: 9px; right: 9px; }
.bottle-one { height: 155px; left: 12%; transform: rotate(-4deg); }
.bottle-two { background: rgb(255, 248, 238); border: 1px solid rgba(15, 44, 92, 0.24); height: 195px; right: 5%; transform: rotate(5deg); }
.bottle-two::after { color: rgb(15, 44, 92); border-color: rgba(15, 44, 92, 0.22); }
.live-reactions { color: rgba(255, 255, 255, 0.85); flex-direction: column; align-items: center; gap: 0.45rem; display: flex; position: absolute; bottom: 112px; right: 18px; }
.live-reactions span { backdrop-filter: blur(8px); background: rgba(15, 44, 92, 0.38); border-radius: 999px; justify-content: center; align-items: center; width: 28px; height: 28px; display: flex; }
.pinned-product { z-index: 4; backdrop-filter: blur(12px); min-height: 78px; transition: transform .22s var(--ease-out); background: rgba(255, 255, 255, 0.94); align-items: center; gap: 0.75rem; padding: 0.65rem; display: flex; position: absolute; bottom: 18px; left: 18px; right: 18px; box-shadow: rgba(57, 26, 17, 0.18) 0px 18px 45px; }
.live-commerce-stage:hover .pinned-product { transform: translateY(-5px); }
.pinned-thumb { color: rgb(15, 44, 92); background: rgb(219, 234, 254); justify-content: center; align-items: center; width: 46px; height: 46px; display: flex; }
.pinned-product p { color: rgb(83, 98, 115); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; overflow: hidden; }
.pinned-product strong { color: rgb(15, 44, 92); margin-top: 0.15rem; font-family: Manrope, sans-serif; font-size: 13px; display: block; }
.pinned-cta { color: rgb(255, 255, 255); transition: transform .16s var(--ease-out),background-color .18s var(--ease-out); background: rgb(15, 44, 92); border: 0px; padding: 0.55rem 0.65rem; font-size: 9px; font-weight: 800; }
.pinned-cta:hover { color: rgb(23, 24, 26); background: rgb(24, 119, 242); transform: translateY(-2px); }
.pinned-cta:active { transform: scale(0.96); }
@keyframes checkout-spin { 
  100% { transform: rotate(360deg); }
}
.live-console { background: rgb(247, 249, 251); min-width: 0px; padding: 1.35rem; }
.live-console-head { border-bottom: 1px solid rgb(220, 226, 232); justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding-bottom: 1rem; display: flex; }
.live-console-head div { min-width: 0px; }
.live-console-head div > span { color: rgb(123, 137, 152); letter-spacing: 0.14em; text-transform: uppercase; font-size: 8px; font-weight: 800; display: block; }
.live-console-head strong { color: rgb(15, 44, 92); margin-top: 0.35rem; font-family: Manrope, sans-serif; font-size: 13px; line-height: 1.3; display: block; }
.live-status { color: rgb(27, 126, 96); background: rgb(220, 244, 234); align-items: center; gap: 0.35rem; padding: 0.35rem 0.45rem; font-size: 8px; font-weight: 800; display: inline-flex; }
.live-status::before { content: ""; background: rgb(33, 168, 117); border-radius: 999px; width: 5px; height: 5px; }
.live-metrics { grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-top: 1rem; display: grid; }
.live-metrics div { background: rgb(255, 255, 255); border: 1px solid rgb(220, 226, 232); padding: 0.8rem; }
.live-metrics span { color: rgb(123, 137, 152); text-transform: uppercase; letter-spacing: 0.1em; font-size: 8px; font-weight: 700; display: block; }
.live-metrics strong { color: rgb(15, 44, 92); margin-top: 0.35rem; font-family: Manrope, sans-serif; font-size: 22px; display: block; }
.live-feed { margin-top: 1.4rem; }
.live-feed-title { color: rgb(123, 137, 152); letter-spacing: 0.12em; text-transform: uppercase; font-size: 8px; font-weight: 800; }
.live-feed-row { border-bottom: 1px solid rgb(224, 229, 234); align-items: center; gap: 0.55rem; padding: 0.9rem 0px; display: flex; }
.feed-icon { color: rgb(15, 44, 92); background: rgb(233, 240, 247); flex: 0 0 auto; justify-content: center; align-items: center; width: 28px; height: 28px; display: flex; }
.feed-icon.active { color: rgb(20, 86, 184); background: rgb(219, 234, 254); }
.live-feed-row strong { color: rgb(15, 44, 92); font-size: 9px; display: block; }
.live-feed-row p { color: rgb(115, 129, 147); text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; font-size: 8px; overflow: hidden; }
.live-feed-row small { color: rgb(149, 160, 172); white-space: nowrap; font-size: 7px; }
.approval-orbit { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; width: 490px; height: 490px; position: absolute; }
.approval-orbit::after, .approval-orbit::before { content: ""; border: 1px solid rgba(24, 119, 242, 0.35); border-radius: 999px; position: absolute; }
.approval-orbit::before { inset: 42px; }
.approval-orbit::after { inset: 92px; }
.phone-shell { z-index: 3; background: rgb(220, 234, 243); border: 7px solid rgb(9, 29, 48); border-radius: 38px; width: 270px; min-height: 520px; position: relative; overflow: hidden; transform: rotate(-2deg); box-shadow: rgba(0, 0, 0, 0.32) 0px 45px 90px; }
.phone-notch { z-index: 4; background: rgb(9, 29, 48); border-radius: 999px; width: 90px; height: 20px; position: absolute; top: 8px; left: 50%; transform: translate(-50%); }
.phone-header { background: rgb(255, 255, 255); align-items: center; gap: 0.65rem; padding: 2.2rem 1rem 0.8rem; display: flex; }
.phone-chat { background-image: radial-gradient(circle at 10% 10%, rgba(15, 44, 92, 0.043) 0px, rgba(15, 44, 92, 0.043) 1px, rgba(0, 0, 0, 0) 1.5px), radial-gradient(circle at 80% 70%, rgba(15, 44, 92, 0.04) 0px, rgba(15, 44, 92, 0.04) 1px, rgba(0, 0, 0, 0) 1.5px); background-size: 22px 22px, 27px 27px; min-height: 430px; padding: 1.1rem 0.8rem; }
.chat-bubble { background: rgb(255, 255, 255); padding: 0.9rem; box-shadow: rgba(15, 44, 92, 0.1) 0px 12px 35px; }
.chat-action { color: rgb(100, 115, 135); border: 1px solid rgb(223, 229, 234); justify-content: center; align-items: center; min-height: 28px; font-size: 9px; font-weight: 700; display: flex; }
.chat-action.primary { color: rgb(255, 255, 255); background: rgb(15, 44, 92); border-color: rgb(15, 44, 92); gap: 0.3rem; }
.chat-action.danger { color: rgb(182, 87, 77); }
.approval-note { z-index: 5; color: rgb(24, 119, 242); background: rgb(22, 54, 83); border: 1px solid rgba(255, 255, 255, 0.16); align-items: center; gap: 0.7rem; min-width: 180px; padding: 0.8rem; display: flex; position: absolute; box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 55px; }
.approval-note div { flex-direction: column; display: flex; }
.approval-note strong { color: rgb(255, 255, 255); font-size: 11px; }
.approval-note span { color: rgba(255, 255, 255, 0.45); margin-top: 0.15rem; font-size: 9px; }
.note-one { top: 18%; left: 1%; }
.note-two { bottom: 19%; right: 0px; }
.workflow { border-top: 1px solid rgb(207, 201, 192); border-left: 1px solid rgb(207, 201, 192); grid-template-columns: repeat(5, minmax(0px, 1fr)); display: grid; }
.workflow-step { min-height: 260px; transition: background-color .18s var(--ease-out),transform .18s var(--ease-out); border-bottom: 1px solid rgb(207, 201, 192); border-right: 1px solid rgb(207, 201, 192); flex-direction: column; padding: 1.6rem; display: flex; }
.workflow-step:hover { background: rgb(255, 255, 255); transform: translateY(-4px); }
.workflow-number { color: rgb(24, 119, 242); font-family: Manrope, sans-serif; font-size: 13px; font-weight: 800; }
.workflow-step h3 { color: rgb(15, 44, 92); letter-spacing: -0.03em; margin-top: auto; font-family: Manrope, sans-serif; font-size: 18px; font-weight: 800; }
.workflow-step p { color: rgb(104, 119, 138); margin-top: 0.65rem; font-size: 12px; line-height: 1.55; }
.audience-chip { color: rgb(92, 107, 126); min-height: 39px; transition: background-color .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out); border: 1px solid rgb(203, 211, 220); align-items: center; padding: 0.55rem 0.85rem; font-size: 12px; font-weight: 700; display: inline-flex; }
.audience-chip:hover, .audience-chip.active { color: rgb(255, 255, 255); background: rgb(15, 44, 92); border-color: rgb(15, 44, 92); }
.agency-panel { background: rgb(255, 255, 255); border: 1px solid rgb(220, 226, 232); padding: clamp(1.4rem, 4vw, 2.2rem); box-shadow: rgba(15, 44, 92, 0.1) 0px 28px 80px; }
.brand-row { min-height: 57px; transition: transform .18s var(--ease-out),border-color .18s var(--ease-out); border: 1px solid rgb(225, 230, 235); align-items: center; gap: 0.8rem; padding: 0.65rem; display: flex; }
.brand-row:hover { border-color: rgb(170, 182, 194); transform: translate(4px); }
.brand-avatar { color: rgb(255, 255, 255); flex: 0 0 auto; justify-content: center; align-items: center; width: 32px; height: 32px; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 800; display: flex; }
.agency-metric { color: rgb(15, 44, 92); letter-spacing: -0.04em; font-family: Manrope, sans-serif; font-size: 23px; font-weight: 800; display: block; }
.agency-metric + span { color: rgb(123, 136, 151); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.2rem; font-size: 9px; display: block; }
.plan-card { isolation: isolate; transform-origin: center bottom; min-height: 450px; transition: transform .26s var(--ease-out),border-color .22s var(--ease-out),box-shadow .26s var(--ease-out),background-color .22s var(--ease-out); background: rgb(251, 251, 250); border: 1px solid rgb(220, 226, 232); flex-direction: column; padding: 1.6rem; display: flex; position: relative; overflow: hidden; }
.plan-card::before { content: ""; z-index: -1; transform-origin: 0px center; width: 100%; height: 4px; transition: transform .3s var(--ease-out); background: rgb(24, 119, 242); position: absolute; top: 0px; left: 0px; transform: scaleX(0); }
.plan-card::after { content: ""; z-index: -1; width: 150px; height: 150px; transition: transform .36s var(--ease-out),border-color .22s var(--ease-out); border: 22px solid rgba(24, 119, 242, 0.08); position: absolute; bottom: -68px; right: -68px; transform: rotate(12deg) translate(24px, 24px); }
.plan-card:hover, .plan-card:focus-within { background: rgb(255, 255, 255); border-color: rgb(137, 153, 168); transform: translateY(-10px); box-shadow: rgba(15, 44, 92, 0.14) 0px 28px 64px; }
.plan-card:hover::before, .plan-card:focus-within::before { transform: scaleX(1); }
.plan-card:hover::after, .plan-card:focus-within::after { border-color: rgba(24, 119, 242, 0.18); transform: rotate(20deg) translate(-8px, -8px); }
.plan-card.featured { background: rgb(244, 248, 251); border: 2px solid rgb(15, 44, 92); padding-top: 2.8rem; }
.plan-card.featured::before { transform: scaleX(1); }
.plan-price { transition: color .2s var(--ease-out),transform .22s var(--ease-out); display: inline-block; }
.plan-card:hover .plan-price, .plan-card:focus-within .plan-price { color: rgb(24, 119, 242); transform: translateY(-2px); }
.plan-feature-list li { transition: transform .2s var(--ease-out),color .18s var(--ease-out); }
.plan-card:hover .plan-feature-list li, .plan-card:focus-within .plan-feature-list li { color: rgb(15, 44, 92); transform: translate(4px); }
.plan-card:hover .plan-feature-list li:nth-child(2), .plan-card:focus-within .plan-feature-list li:nth-child(2) { transition-delay: 25ms; }
.plan-card:hover .plan-feature-list li:nth-child(3), .plan-card:focus-within .plan-feature-list li:nth-child(3) { transition-delay: 50ms; }
.plan-card:hover .plan-feature-list li:nth-child(4), .plan-card:focus-within .plan-feature-list li:nth-child(4) { transition-delay: 75ms; }
.plan-badge { color: rgb(255, 255, 255); text-transform: uppercase; letter-spacing: 0.1em; background: rgb(15, 44, 92); padding: 0.45rem 0.75rem; font-size: 10px; font-weight: 800; position: absolute; top: 0px; right: 0px; }
.faq-list { border-top: 1px solid rgb(207, 215, 223); }
.faq-item { border-bottom: 1px solid rgb(207, 215, 223); }
.faq-item summary { color: rgb(15, 44, 92); letter-spacing: -0.02em; justify-content: space-between; align-items: center; gap: 1rem; min-height: 78px; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 800; list-style: none; display: flex; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { transition: transform .18s var(--ease-out); flex: 0 0 auto; }
.faq-item p { color: rgb(104, 119, 138); max-width: 720px; padding: 0px 3rem 1.6rem 0px; font-size: 14px; line-height: 1.7; }
.final-cta { background: rgb(15, 44, 92); padding: clamp(2rem, 8vw, 6rem); position: relative; overflow: hidden; }
.final-cta::after { content: ""; border: 46px solid rgb(24, 119, 242); width: 340px; height: 340px; position: absolute; top: -70px; right: -70px; transform: rotate(15deg); }
.final-cta-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, rgba(0, 0, 0, 0) 1px); background-size: 44px 44px; position: absolute; inset: 0px; mask-image: linear-gradient(90deg, rgb(0, 0, 0), rgba(0, 0, 0, 0) 80%); }
.footer-title { color: rgb(15, 44, 92); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 800; }
.footer-links { flex-direction: column; gap: 0.8rem; margin-top: 1.1rem; display: flex; }
.footer-links a { color: rgb(104, 119, 138); transition: color .16s var(--ease-out); font-size: 13px; }
.footer-links a:hover { color: rgb(24, 119, 242); }
}
@layer utilities {
.relative { position: relative; }
.z-10 { z-index: 10; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.container { width: 100%; }
@media (min-width: 40rem) {
.container { max-width: 40rem; }
}
@media (min-width: 48rem) {
.container { max-width: 48rem; }
}
@media (min-width: 64rem) {
.container { max-width: 64rem; }
}
@media (min-width: 80rem) {
.container { max-width: 80rem; }
}
@media (min-width: 96rem) {
.container { max-width: 96rem; }
}
.my-6 { margin-block: calc(var(--spacing)*6); }
.mt-0\.5 { margin-top: calc(var(--spacing)*.5); }
.mt-1 { margin-top: calc(var(--spacing)*1); }
.mt-2 { margin-top: calc(var(--spacing)*2); }
.mt-3 { margin-top: calc(var(--spacing)*3); }
.mt-4 { margin-top: calc(var(--spacing)*4); }
.mt-5 { margin-top: calc(var(--spacing)*5); }
.mt-6 { margin-top: calc(var(--spacing)*6); }
.mt-8 { margin-top: calc(var(--spacing)*8); }
.mt-9 { margin-top: calc(var(--spacing)*9); }
.mt-10 { margin-top: calc(var(--spacing)*10); }
.mt-14 { margin-top: calc(var(--spacing)*14); }
.mt-16 { margin-top: calc(var(--spacing)*16); }
.mt-auto { margin-top: auto; }
.mb-1 { margin-bottom: calc(var(--spacing)*1); }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.h-1\.5 { height: calc(var(--spacing)*1.5); }
.h-2 { height: calc(var(--spacing)*2); }
.h-6 { height: calc(var(--spacing)*6); }
.h-8 { height: calc(var(--spacing)*8); }
.h-10 { height: calc(var(--spacing)*10); }
.h-28 { height: calc(var(--spacing)*28); }
.h-\[76px\] { height: 76px; }
.h-full { height: 100%; }
.h-px { height: 1px; }
.min-h-12 { min-height: calc(var(--spacing)*12); }
.min-h-\[610px\] { min-height: 610px; }
.w-2 { width: calc(var(--spacing)*2); }
.w-6 { width: calc(var(--spacing)*6); }
.w-8 { width: calc(var(--spacing)*8); }
.w-9 { width: calc(var(--spacing)*9); }
.w-10 { width: calc(var(--spacing)*10); }
.w-24 { width: calc(var(--spacing)*24); }
.max-w-\[360px\] { max-width: 360px; }
.max-w-\[390px\] { max-width: 390px; }
.max-w-\[560px\] { max-width: 560px; }
.max-w-\[580px\] { max-width: 580px; }
.max-w-\[600px\] { max-width: 600px; }
.max-w-\[620px\] { max-width: 620px; }
.max-w-\[650px\] { max-width: 650px; }
.max-w-\[700px\] { max-width: 700px; }
.max-w-\[760px\] { max-width: 760px; }
.max-w-\[770px\] { max-width: 770px; }
.min-w-0 { min-width: calc(var(--spacing)*0); }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-baseline { align-items: baseline; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-0 { gap: calc(var(--spacing)*0); }
.gap-1 { gap: calc(var(--spacing)*1); }
.gap-1\.5 { gap: calc(var(--spacing)*1.5); }
.gap-2 { gap: calc(var(--spacing)*2); }
.gap-2\.5 { gap: calc(var(--spacing)*2.5); }
.gap-3 { gap: calc(var(--spacing)*3); }
.gap-4 { gap: calc(var(--spacing)*4); }
.gap-5 { gap: calc(var(--spacing)*5); }
.gap-6 { gap: calc(var(--spacing)*6); }
.gap-8 { gap: calc(var(--spacing)*8); }
.gap-10 { gap: calc(var(--spacing)*10); }
.gap-12 { gap: calc(var(--spacing)*12); }
.gap-14 { gap: calc(var(--spacing)*14); }
.gap-16 { gap: calc(var(--spacing)*16); }
:where(.space-y-1\.5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse))); }
:where(.space-y-3 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse))); }
:where(.space-y-5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse))); }
:where(.space-y-6 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse))); }
.gap-x-6 { column-gap: calc(var(--spacing)*6); }
.gap-y-3 { row-gap: calc(var(--spacing)*3); }
.truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: 3.40282e+38px; }
.border { border-style: var(--tw-border-style); border-width: 1px; }
.border-x { border-inline-style: var(--tw-border-style); border-inline-width: 1px; }
.border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; }
.border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; }
.border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; }
.border-\[\#d9dee5\] { border-color: rgb(217, 222, 229); }
.border-\[\#dce2e8\] { border-color: rgb(220, 226, 232); }
.border-\[\#ff6b4a\]\/30 { border-color: rgba(24, 119, 242, 0.3); }
.border-coral { border-color: rgb(24, 119, 242); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
@supports (color:color-mix(in lab,red,red)) {
.border-white\/10 { border-color: color-mix(in oklab,var(--color-white)10%,transparent); }
}
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
@supports (color:color-mix(in lab,red,red)) {
.border-white\/15 { border-color: color-mix(in oklab,var(--color-white)15%,transparent); }
}
.bg-\[\#21c087\] { background-color: rgb(33, 192, 135); }
.bg-\[\#102a43\] { background-color: rgb(15, 44, 92); }
.bg-\[\#cad7e5\] { background-color: rgb(202, 215, 229); }
.bg-\[\#e1e6eb\] { background-color: rgb(225, 230, 235); }
.bg-\[\#e9f0f7\] { background-color: rgb(233, 240, 247); }
.bg-\[\#edf0f3\] { background-color: rgb(237, 240, 243); }
.bg-\[\#f4efe8\] { background-color: rgb(240, 246, 255); }
.bg-\[\#ff6b4a\] { background-color: rgb(24, 119, 242); }
.bg-\[\#ffebe5\] { background-color: rgb(231, 240, 255); }
.bg-\[\#fff9f7\] { background-color: rgb(245, 249, 255); }
.bg-coral { background-color: rgb(24, 119, 242); }
.bg-deep { background-color: rgb(15, 44, 92); }
.bg-paper { background-color: rgb(255, 255, 255); }
.bg-white { background-color: var(--color-white); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
@supports (color:color-mix(in lab,red,red)) {
.bg-white\/20 { background-color: color-mix(in oklab,var(--color-white)20%,transparent); }
}
.bg-white\/\[\.04\] { background-color: rgba(255, 255, 255, 0.04); }
@supports (color:color-mix(in lab,red,red)) {
.bg-white\/\[\.04\] { background-color: color-mix(in oklab,var(--color-white)4%,transparent); }
}
.p-3 { padding: calc(var(--spacing)*3); }
.p-4 { padding: calc(var(--spacing)*4); }
.pt-4 { padding-top: calc(var(--spacing)*4); }
.pt-5 { padding-top: calc(var(--spacing)*5); }
.pt-6 { padding-top: calc(var(--spacing)*6); }
.pt-10 { padding-top: calc(var(--spacing)*10); }
.pt-14 { padding-top: calc(var(--spacing)*14); }
.pt-16 { padding-top: calc(var(--spacing)*16); }
.pb-1 { padding-bottom: calc(var(--spacing)*1); }
.pb-5 { padding-bottom: calc(var(--spacing)*5); }
.pb-8 { padding-bottom: calc(var(--spacing)*8); }
.pb-12 { padding-bottom: calc(var(--spacing)*12); }
.pb-20 { padding-bottom: calc(var(--spacing)*20); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-\[8px\] { font-size: 8px; }
.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 15px; }
.text-\[17px\] { font-size: 17px; }
.text-\[18px\] { font-size: 18px; }
.text-\[23px\] { font-size: 23px; }
.text-\[27px\] { font-size: 27px; }
.text-\[29px\] { font-size: 29px; }
.text-\[36px\] { font-size: 36px; }
.text-\[clamp\(2\.5rem\,6vw\,5\.25rem\)\] { font-size: clamp(2.5rem, 6vw, 5.25rem); }
.leading-4 { --tw-leading: calc(var(--spacing)*4); line-height: calc(var(--spacing)*4); }
.leading-5 { --tw-leading: calc(var(--spacing)*5); line-height: calc(var(--spacing)*5); }
.leading-6 { --tw-leading: calc(var(--spacing)*6); line-height: calc(var(--spacing)*6); }
.leading-7 { --tw-leading: calc(var(--spacing)*7); line-height: calc(var(--spacing)*7); }
.leading-8 { --tw-leading: calc(var(--spacing)*8); line-height: calc(var(--spacing)*8); }
.leading-\[\.98\] { --tw-leading: .98; line-height: 0.98; }
.leading-\[1\.08\] { --tw-leading: 1.08; line-height: 1.08; }
.leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); }
.font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); }
.font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); }
.font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); }
.tracking-\[-\.03em\] { --tw-tracking: -.03em; letter-spacing: -0.03em; }
.tracking-\[-\.04em\] { --tw-tracking: -.04em; letter-spacing: -0.04em; }
.tracking-\[-\.05em\] { --tw-tracking: -.05em; letter-spacing: -0.05em; }
.tracking-\[-\.06em\] { --tw-tracking: -.06em; letter-spacing: -0.06em; }
.tracking-\[-\.045em\] { --tw-tracking: -.045em; letter-spacing: -0.045em; }
.tracking-\[\.2em\] { --tw-tracking: .2em; letter-spacing: 0.2em; }
.tracking-\[\.15em\] { --tw-tracking: .15em; letter-spacing: 0.15em; }
.tracking-\[\.16em\] { --tw-tracking: .16em; letter-spacing: 0.16em; }
.tracking-\[\.18em\] { --tw-tracking: .18em; letter-spacing: 0.18em; }
.text-\[\#3f4f60\] { color: rgb(63, 79, 96); }
.text-\[\#8b98a9\] { color: rgb(139, 152, 169); }
.text-\[\#21a875\] { color: rgb(33, 168, 117); }
.text-\[\#102a43\] { color: rgb(15, 44, 92); }
.text-\[\#17181a\] { color: rgb(23, 24, 26); }
.text-\[\#75839a\] { color: rgb(117, 131, 154); }
.text-\[\#425466\] { color: rgb(66, 84, 102); }
.text-\[\#526276\] { color: rgb(82, 98, 118); }
.text-\[\#536273\] { color: rgb(83, 98, 115); }
.text-\[\#718096\] { color: rgb(113, 128, 150); }
.text-\[\#ff6b4a\] { color: rgb(24, 119, 242); }
.text-coral { color: rgb(24, 119, 242); }
.text-deep { color: rgb(15, 44, 92); }
.text-slate { color: rgb(104, 119, 138); }
.text-white { color: var(--color-white); }
.text-white\/35 { color: rgba(255, 255, 255, 0.35); }
@supports (color:color-mix(in lab,red,red)) {
.text-white\/35 { color: color-mix(in oklab,var(--color-white)35%,transparent); }
}
.text-white\/45 { color: rgba(255, 255, 255, 0.45); }
@supports (color:color-mix(in lab,red,red)) {
.text-white\/45 { color: color-mix(in oklab,var(--color-white)45%,transparent); }
}
.text-white\/55 { color: rgba(255, 255, 255, 0.55); }
@supports (color:color-mix(in lab,red,red)) {
.text-white\/55 { color: color-mix(in oklab,var(--color-white)55%,transparent); }
}
.text-white\/62 { color: rgba(255, 255, 255, 0.62); }
@supports (color:color-mix(in lab,red,red)) {
.text-white\/62 { color: color-mix(in oklab,var(--color-white)62%,transparent); }
}
.text-white\/88 { color: rgba(255, 255, 255, 0.88); }
@supports (color:color-mix(in lab,red,red)) {
.text-white\/88 { color: color-mix(in oklab,var(--color-white)88%,transparent); }
}
.uppercase { text-transform: uppercase; }
.opacity-65 { opacity: 0.65; }
.opacity-75 { opacity: 0.75; }
.transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.delay-1 { transition-delay: 1ms; }
.delay-2 { transition-delay: 2ms; }
.delay-3 { transition-delay: 3ms; }
.delay-1 { --tw-animation-delay: 1ms; animation-delay: 1ms; }
.delay-2 { --tw-animation-delay: 2ms; animation-delay: 2ms; }
.delay-3 { --tw-animation-delay: 3ms; animation-delay: 3ms; }
@media (hover: hover) {
.hover\:text-coral:hover { color: rgb(24, 119, 242); }
}
.has-focus\:border-ring:has(:focus) { border-color: var(--ring); }
.has-focus\:ring-\[3px\]:has(:focus) { --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); }
.has-focus\:ring-ring\/50:has(:focus) { --tw-ring-color: var(--ring); }
@supports (color:color-mix(in lab,red,red)) {
.has-focus\:ring-ring\/50:has(:focus) { --tw-ring-color: color-mix(in oklab,var(--ring)50%,transparent); }
}
.has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has([data-slot="input-group-control"]:focus-visible) { border-color: var(--ring); }
.has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-\[3px\]:has([data-slot="input-group-control"]:focus-visible) { --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); }
.has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot="input-group-control"]:focus-visible) { --tw-ring-color: var(--ring); }
@supports (color:color-mix(in lab,red,red)) {
.has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot="input-group-control"]:focus-visible) { --tw-ring-color: color-mix(in oklab,var(--ring)50%,transparent); }
}
@media (hover: hover) {
.data-\[active\=true\]\:hover\:bg-accent[data-active="true"]:hover { background-color: var(--accent); }
}
.data-\[active\=true\]\:focus\:bg-accent[data-active="true"]:focus { background-color: var(--accent); }
@media (hover: hover) {
.data-\[state\=open\]\:hover\:bg-accent[data-state="open"]:hover { background-color: var(--accent); }
}
.data-\[state\=open\]\:focus\:bg-accent[data-state="open"]:focus { background-color: var(--accent); }
.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus { background-color: var(--destructive); }
@supports (color:color-mix(in lab,red,red)) {
.data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant="destructive"]:focus { background-color: color-mix(in oklab,var(--destructive)10%,transparent); }
}
.data-\[variant\=destructive\]\:focus\:text-destructive[data-variant="destructive"]:focus { color: var(--destructive); }
@media (min-width: 40rem) {
.sm\:flex-row { flex-direction: row; }
.sm\:items-center { align-items: center; }
.sm\:justify-between { justify-content: space-between; }
}
@media (min-width: 48rem) {
.md\:col-span-5 { grid-column: span 5 / span 5; }
.md\:col-span-7 { grid-column: span 7 / span 7; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0px, 1fr)); }
.md\:grid-cols-\[1\.2fr_1fr_1fr_1fr\] { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.md\:grid-cols-\[1\.4fr_1fr_1fr\] { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 64rem) {
.lg\:order-1 { order: 1; }
.lg\:order-2 { order: 2; }
.lg\:flex { display: flex; }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.lg\:grid-cols-\[0\.9fr_1\.1fr\] { grid-template-columns: 0.9fr 1.1fr; }
.lg\:grid-cols-\[0\.72fr_1\.28fr\] { grid-template-columns: 0.72fr 1.28fr; }
.lg\:grid-cols-\[0\.76fr_1\.24fr\] { grid-template-columns: 0.76fr 1.24fr; }
.lg\:grid-cols-\[0\.87fr_1\.13fr\] { grid-template-columns: 0.87fr 1.13fr; }
.lg\:flex-row { flex-direction: row; }
.lg\:items-center { align-items: center; }
.lg\:items-end { align-items: flex-end; }
.lg\:justify-between { justify-content: space-between; }
.lg\:gap-8 { gap: calc(var(--spacing)*8); }
.lg\:justify-self-end { justify-self: flex-end; }
.lg\:pt-20 { padding-top: calc(var(--spacing)*20); }
.lg\:pb-28 { padding-bottom: calc(var(--spacing)*28); }
.lg\:pl-4 { padding-left: calc(var(--spacing)*4); }
}
@media (min-width: 80rem) {
.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
}
@media (hover: hover) {
.dark\:hover\:bg-accent\/50:is(.dark *):hover { background-color: var(--accent); }
@supports (color:color-mix(in lab,red,red)) {
.dark\:hover\:bg-accent\/50:is(.dark *):hover { background-color: color-mix(in oklab,var(--accent)50%,transparent); }
}
.dark\:hover\:bg-input\/50:is(.dark *):hover { background-color: var(--input); }
@supports (color:color-mix(in lab,red,red)) {
.dark\:hover\:bg-input\/50:is(.dark *):hover { background-color: color-mix(in oklab,var(--input)50%,transparent); }
}
.dark\:hover\:text-accent-foreground:is(.dark *):hover { color: var(--accent-foreground); }
}
.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible { --tw-ring-color: var(--destructive); }
@supports (color:color-mix(in lab,red,red)) {
.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible { --tw-ring-color: color-mix(in oklab,var(--destructive)40%,transparent); }
}
.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus { background-color: var(--destructive); }
@supports (color:color-mix(in lab,red,red)) {
.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(.dark *)[data-variant="destructive"]:focus { background-color: color-mix(in oklab,var(--destructive)20%,transparent); }
}
@media (hover: hover) {
.\[a\]\:hover\:bg-accent\/50:is(a):hover { background-color: var(--accent); }
@supports (color:color-mix(in lab,red,red)) {
.\[a\]\:hover\:bg-accent\/50:is(a):hover { background-color: color-mix(in oklab,var(--accent)50%,transparent); }
}
}
.\[\&\>\*\]\:focus-visible\:relative > :focus-visible { position: relative; }
.\[\&\>\*\]\:focus-visible\:z-10 > :focus-visible { z-index: 10; }
.\[\&\>a\:hover\]\:text-primary > a:hover { color: var(--primary); }
@media (hover: hover) {
a.\[a\&\]\:hover\:bg-accent:hover { background-color: var(--accent); }
a.\[a\&\]\:hover\:bg-destructive\/90:hover { background-color: var(--destructive); }
@supports (color:color-mix(in lab,red,red)) {
a.\[a\&\]\:hover\:bg-destructive\/90:hover { background-color: color-mix(in oklab,var(--destructive)90%,transparent); }
}
a.\[a\&\]\:hover\:bg-primary\/90:hover { background-color: var(--primary); }
@supports (color:color-mix(in lab,red,red)) {
a.\[a\&\]\:hover\:bg-primary\/90:hover { background-color: color-mix(in oklab,var(--primary)90%,transparent); }
}
a.\[a\&\]\:hover\:bg-secondary\/90:hover { background-color: var(--secondary); }
@supports (color:color-mix(in lab,red,red)) {
a.\[a\&\]\:hover\:bg-secondary\/90:hover { background-color: color-mix(in oklab,var(--secondary)90%,transparent); }
}
a.\[a\&\]\:hover\:text-accent-foreground:hover { color: var(--accent-foreground); }
}
}
@property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; }
@property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; }
@property --tw-animation-duration { syntax: "*"; inherits: false; }
@property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; }
@property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
:root { --radius: .45rem; --background: #ffffff; --foreground: #17181a; --card: #fff; --card-foreground: #17181a; --popover: #fff; --popover-foreground: #17181a; --primary: #0f2c5c; --primary-foreground: #fff; --secondary: #e9f0f7; --secondary-foreground: #0f2c5c; --muted: #ece9e3; --muted-foreground: #68778a; --accent: #1877f2; --accent-foreground: #17181a; --destructive: #be4a43; --destructive-foreground: #fff; --border: #dce2e8; --input: #dce2e8; --ring: #1877f2; --ease-out: cubic-bezier(.23,1,.32,1); --ease-in-out: cubic-bezier(.77,0,.175,1); }
@media (min-width: 640px) {
.container { padding-left: 1.75rem; padding-right: 1.75rem; }
}
@media (min-width: 1024px) {
.container { padding-left: 2.4rem; padding-right: 2.4rem; }
}
@media (max-width: 1100px) {
.approval-float { right: 0px; }
.metric-float { left: 0px; }
.workflow { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (max-width: 767px) {
.section-space { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.hero-title { font-size: clamp(3rem, 15vw, 4.6rem); }
.hero-copy, .section-copy { font-size: 16px; }
.product-stage { min-height: 510px; margin-top: 1rem; }
.product-stage::before { width: 85%; height: 72%; right: -6%; }
.product-window { width: 95%; min-height: 360px; margin-right: 0px; }
.product-body { grid-template-columns: 92px 1fr; min-height: 304px; }
.product-sidebar { padding: 0.75rem 0.45rem; }
.side-item { justify-content: center; padding: 0.65rem 0.2rem; font-size: 0px; }
.side-item svg { width: 15px; height: 15px; }
.product-main { padding: 0.8rem; }
.calendar-cell { min-height: 72px; padding: 0.25rem; }
.post { justify-content: center; margin-top: 0.4rem; padding: 0.35rem 0.1rem; font-size: 0px; }
.approval-float { width: 205px; bottom: -2%; right: 0px; }
.metric-float { display: none; }
.proof-intro, .proof-stat { border-bottom: 1px solid rgb(220, 226, 232); border-right: 0px; min-height: 120px; }
.proof-stat:last-child { border-bottom: 0px; }
.feature-panel { min-height: 340px; }
.live-commerce-stage { grid-template-columns: 1fr; }
.live-video { min-height: 470px; }
.live-console { min-height: 340px; }
.live-scene { padding-left: 1.25rem; padding-right: 1.25rem; }
.live-copy strong { font-size: 2.35rem; }
.workflow { grid-template-columns: 1fr; }
.workflow-step { min-height: 180px; }
.phone-shell { width: 250px; }
.approval-orbit { width: 390px; height: 390px; }
.approval-note { min-width: 160px; }
.note-one { top: 14%; left: -2%; }
.note-two { bottom: 12%; right: -2%; }
.plan-card { min-height: auto; }
.plan-badge { top: 0px; }
.final-cta::after { border-width: 28px; width: 180px; height: 180px; top: -80px; right: -80px; }
}
@media (max-width: 420px) {
.product-stage { min-height: 440px; }
.product-window { width: 100%; }
.product-topbar { height: 48px; }
.product-body { grid-template-columns: 64px 1fr; min-height: 280px; }
.calendar-cell { min-height: 59px; }
.approval-float { width: 180px; padding: 0.75rem; }
.approval-orbit { width: 330px; height: 330px; }
.approval-note { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.reveal-item { animation: reveal-up .68s var(--ease-out)both; }
.delay-1 { animation-delay: 80ms; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.approval-float { animation: drift 1.8s ease-in-out -1s infinite alternate; }
.metric-float { animation: drift-reverse 2.3s ease-in-out -3s infinite alternate; }
.note-one { animation: drift 2.6s ease-in-out -2s infinite alternate; }
.note-two { animation: drift-reverse 3s ease-in-out -4s infinite alternate; }
.approval-float:hover, .metric-float:hover, .approval-note:hover { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.plan-card, .plan-card::before, .plan-card::after, .plan-price, .plan-feature-list li, .plan-cta svg, .pinned-product, .pinned-cta { transition: none; }
}
@keyframes reveal-up { 
  0% { opacity: 1; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes drift { 
  0% { transform: rotate(-3deg) translateY(6px); }
  100% { transform: rotate(2deg) translateY(-30px); }
}
@keyframes drift-reverse { 
  0% { transform: rotate(3deg) translateY(-8px); }
  100% { transform: rotate(-2deg) translateY(22px); }
}
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-gradient-position { syntax: "*"; inherits: false; }
@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-tracking { syntax: "*"; inherits: false; }
@property --tw-ordinal { syntax: "*"; inherits: false; }
@property --tw-slashed-zero { syntax: "*"; inherits: false; }
@property --tw-numeric-figure { syntax: "*"; inherits: false; }
@property --tw-numeric-spacing { syntax: "*"; inherits: false; }
@property --tw-numeric-fraction { syntax: "*"; inherits: false; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-backdrop-blur { syntax: "*"; inherits: false; }
@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }
@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }
@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }
@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-backdrop-invert { syntax: "*"; inherits: false; }
@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }
@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }
@property --tw-ease { syntax: "*"; inherits: false; }
@property --tw-content { syntax: "*"; inherits: false; initial-value: ""; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
@keyframes pulse { 
  50% { opacity: 0.5; }
}
@keyframes enter { 
  0% { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }
}
@keyframes exit { 
  100% { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }
}
@keyframes accordion-down { 
  0% { height: 0px; }
  100% { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }
}
@keyframes accordion-up { 
  0% { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }
  100% { height: 0px; }
}
@keyframes caret-blink { 
  0%, 70%, 100% { opacity: 1; }
  20%, 50% { opacity: 0; }
}

/* Identidade WeYouAds e navegação nativa, sem dependência de React. */
.wm{font-family:Manrope,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#0f2c5c}
.wm .dot{color:#4293fb}
.mobile-menu{position:relative;color:#0f2c5c}
.mobile-menu summary{cursor:pointer;list-style:none;font-weight:700;padding:12px}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu nav{position:absolute;right:0;top:100%;width:230px;padding:16px;background:#fff;border:1px solid #dce2e8;box-shadow:0 12px 32px #0f2c5c18}
.mobile-menu nav a{display:block;padding:10px}
@media(min-width:1024px){.mobile-menu{display:none}}
:focus-visible{outline:3px solid #1877f2;outline-offset:4px}
section[id]{scroll-margin-top:90px}
.btn--primary{display:flex;justify-content:center;padding:12px 16px;background:#1877f2;color:#fff;font-weight:700;cursor:pointer}
.plan-card button{cursor:pointer;margin-top:auto}
.button-coral,.plan-featured .plan-cta{color:#fff}
.hero-title{font-size:clamp(3rem,4.8vw,5rem)}
@media(max-width:767px){.hero-title{font-size:clamp(2.6rem,11vw,4.5rem)}}
.grid > *{min-width:0}
.approval-orbit{max-width:100%}
.faq-item[open] summary svg{transform:rotate(180deg)}
.wm{font-family:"Bricolage Grotesque",Manrope,sans-serif}
.live-video{background:var(--orange)}

.live-copy strong,.live-copy span,.live-copy p{color:#0f2c5c}
.feature-panel:nth-child(2){background:var(--orange);color:#0f2c5c}

/* Azul estrutural, laranja de destaque e superfícies brancas. */
:root{--orange:#ff8a3d;--orange-hover:#ff9d5c;--orange-tint:#fff2e8;--accent:var(--orange);--accent-foreground:#0f2c5c}
.button-primary,.button-coral,.btn--primary{background:var(--orange);border-color:var(--orange);color:#0f2c5c}
.button-primary:hover,.button-coral:hover,.btn--primary:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
.hero-title span{color:#bf4b0b}
.product-stage::before,.new-feature-badge,.nav-link::after{background:var(--orange)}
.new-feature-badge{color:#0f2c5c}
.post.coral,.pinned-thumb{background:var(--orange-tint)}
.plan-card::before{background:var(--orange)}
.final-cta::after{border-color:var(--orange)}

.wm .wm-ads{color:var(--orange)}

@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal{transition:opacity .65s ease-out,translate .65s cubic-bezier(.22,1,.36,1)}
  .scroll-reveal[data-delay="1"]{transition-delay:80ms}
  .scroll-reveal[data-delay="2"]{transition-delay:160ms}
  .scroll-reveal[data-delay="3"]{transition-delay:240ms}
  .scroll-reveal[data-delay="4"]{transition-delay:320ms}
  .scroll-pending{opacity:0;translate:0 32px}
  .scroll-pending:focus-within{opacity:1;translate:none;transition:none}
}

/* Parallax nativo: só decoração; sem suporte ou com movimento reduzido, fica estático. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-grid-pattern,.product-stage::before{
      animation:hero-parallax linear both;
      animation-timeline:scroll(root);
      animation-range:0px 900px;
    }
    .hero-grid-pattern{--parallax-distance:120px;inset:-120px 0}
    .product-stage::before{--parallax-distance:-65px}
    .approval-orbit,.final-cta-grid{
      animation:section-parallax linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    .final-cta-grid{inset:-48px 0}
  }
}
@keyframes hero-parallax{from{translate:0 0}to{translate:0 var(--parallax-distance)}}
@keyframes section-parallax{from{translate:0 -40px}to{translate:0 40px}}

/* Cena de mídia: rolagem nativa, com leitura estática como padrão. */
.media-story{background:#0f2c5c;color:#fff;position:relative}
.media-scene{min-height:720px;min-height:90svh;display:grid;place-items:center;position:relative;isolation:isolate;overflow:clip;padding:100px 24px}
.media-scene::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 60%,#1877f266,transparent 65%),linear-gradient(135deg,#061733,#0f2c5c)}
.media-scene-ring{position:absolute;width:min(72vw,800px);aspect-ratio:1;border:1px solid #ff8a3d80;border-radius:50%;z-index:-1;box-shadow:0 0 0 70px #1877f212,0 0 0 140px #1877f20c}
.media-scene-copy{text-align:center;position:relative;z-index:2;max-width:960px}
.media-scene-kicker{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.22em;color:#ff9d5c;margin-bottom:28px}
.media-scene h2{font-family:Manrope,sans-serif;font-size:clamp(3rem,7.4vw,7.5rem);line-height:.98;letter-spacing:-.065em;font-weight:800}
.media-scene h2 span{color:#ff8a3d}
.media-scene-description{font-size:clamp(14px,1.4vw,18px);line-height:1.6;color:#d6e4fa;max-width:520px;margin:28px auto 0}
.media-scene-channels{position:absolute;inset:0;pointer-events:none}
.media-channel{position:absolute;padding:16px 24px;background:#fff;color:#0f2c5c;border:1px solid #fff8;box-shadow:0 20px 50px #0003;font-weight:800;font-size:14px;border-radius:12px;rotate:var(--tilt);--travel:80px}
.channel-social{left:6%;top:17%;--tilt:-9deg;--travel:-100px}
.channel-creators{right:5%;top:19%;--tilt:8deg;--travel:-75px;background:#ff8a3d}
.channel-tv{left:12%;bottom:18%;--tilt:7deg;--travel:100px}
.channel-radio{right:10%;bottom:20%;--tilt:-7deg;--travel:80px}
.channel-digital{left:42%;bottom:13%;--tilt:-3deg;--travel:0px;background:#1877f2;color:#fff}
.media-scene-next{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff;z-index:3;padding:12px}
.media-scene-next span{display:inline-block;margin-left:10px;color:#ff8a3d}
@media(max-width:767px){
  .media-scene{min-height:760px;padding:150px 22px}
  .media-scene h2{font-size:clamp(2.6rem,10.5vw,4.6rem)}
  .media-scene-kicker{font-size:9px;letter-spacing:.14em}
  .media-channel{font-size:11px;padding:12px 14px}
  .channel-social{left:5%;top:12%}.channel-creators{right:5%;top:18%}
  .channel-tv{left:8%;bottom:21%}.channel-radio{right:8%;bottom:23%}
  .channel-digital{left:34%;bottom:13%}
}
@supports (animation-timeline: view()) {
  @media(prefers-reduced-motion:no-preference) and (min-height:650px){
    .media-story{height:240svh;view-timeline-name:--media-story;view-timeline-axis:block}
    .media-scene{position:sticky;top:76px;height:calc(100svh - 76px);min-height:0}
    .media-scene-copy{animation:scene-zoom linear both;animation-timeline:--media-story;animation-range:contain 0% contain 100%}
    .media-channel{animation:scene-depth linear both;animation-timeline:--media-story;animation-range:contain 0% contain 100%}
    .media-scene-ring{animation:scene-ring linear both;animation-timeline:--media-story;animation-range:contain 0% contain 100%}
    .media-story:focus-within .media-scene-copy,.media-story:focus-within .media-channel{animation:none}
  }
}
@keyframes scene-zoom{0%{scale:.78;translate:0 24px}65%{scale:1;translate:0 0}100%{scale:1.06;translate:0 -18px}}
@keyframes scene-depth{from{translate:0 0;scale:1}to{translate:0 var(--travel);scale:1.18}}
@keyframes scene-ring{from{scale:.7;rotate:-12deg;opacity:.35}to{scale:1.7;rotate:25deg;opacity:1}}