/* Lead Distribution Engine — WordPress build of css/styles.css (generated). Every selector is scoped to .lde-main with :where() so specificity is unchanged; the reset keeps .lde-main weight to beat Enfold element rules; keyframes are prefixed lde-; html/body move to .lde-main; the product header/footer rules are dropped. */ :root { --sales-primary: #0040DF; --sales-secondary: #22C55E; --sales-tint: #EFF6FF; } :where(.lde-main), :where(.lde-main) .light-ui { --bg: #FFFFFF; --surface: #FFFFFF; --bg-alt: #F9F9F9; --tint: var(--sales-tint); --ink: #0A0A0A; --text: #374151; --muted: #4B5165; --faint: #9CA3AF; --line: #E2E8F0; --line-soft: #EEEEEE; --line-strong: color-mix(in srgb, var(--sales-primary) 16%, #E2E8F0); --blue-text: var(--sales-primary); --green-ink: color-mix(in srgb, var(--sales-secondary) 70%, #0A0A0A); --green-wash: color-mix(in srgb, var(--sales-secondary) 12%, #FFFFFF); } :where(.lde-main) .dark { --bg: #0A0A0A; --surface: #141414; --bg-alt: rgba(255, 255, 255, .03); --tint: color-mix(in srgb, var(--sales-primary) 16%, transparent); --ink: #FFFFFF; --text: #E5E7EB; --muted: #9CA3AF; --faint: color-mix(in srgb, #9CA3AF 65%, transparent); --line: rgba(239, 246, 255, .10); --line-soft: rgba(239, 246, 255, .06); --line-strong: rgba(239, 246, 255, .18); --blue-text: color-mix(in srgb, var(--sales-primary) 55%, var(--sales-tint)); --green-ink: var(--sales-secondary); --green-wash: color-mix(in srgb, var(--sales-secondary) 22%, transparent); background: var(--bg); color: var(--text); } :where(.lde-main) { --blue: var(--sales-primary); --blue-deep: color-mix(in srgb, var(--sales-primary) 78%, #0A0A0A); --blue-soft: color-mix(in srgb, var(--sales-primary) 10%, #FFFFFF); --blue-wash: color-mix(in srgb, var(--sales-primary) 7%, transparent); --blue-glow: color-mix(in srgb, var(--sales-primary) 28%, transparent); --green: var(--sales-secondary); --shadow-sm: 0 1px 2px rgba(10, 10, 10, .04), 0 1px 3px rgba(10, 10, 10, .06); --shadow-md: 0 8px 24px -8px rgba(10, 10, 10, .10); --shadow-lg: 0 24px 60px -18px rgba(10, 10, 10, .16); --shadow-blue: 0 30px 80px -24px var(--blue-glow); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace; --ease: cubic-bezier(.2, .8, .2, 1); --frame: 1240px; } .lde-main *, .lde-main *::before, .lde-main *::after { box-sizing: border-box; margin: 0; padding: 0; } .lde-main { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; } :where(.lde-main) a { color: inherit; text-decoration: none; } :where(.lde-main) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :where(.lde-main) img { display: block; max-width: 100%; height: auto; } :where(.lde-main) svg.i { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } :where(.lde-main) ::selection { background: var(--blue); color: #fff; } :where(.lde-main) :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; } :where(.lde-main) .frame { max-width: var(--frame); margin: 0 auto; border-left: 1px dashed var(--line); border-right: 1px dashed var(--line); position: relative; } :where(.lde-main) .sec { border-bottom: 1px dashed var(--line); position: relative; } :where(.lde-main) .sec > .frame::before, :where(.lde-main) .sec > .frame::after { content: ""; position: absolute; bottom: -5px; width: 9px; height: 9px; z-index: 2; background: linear-gradient(var(--line-strong), var(--line-strong)) center / 1px 100% no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat; } :where(.lde-main) .sec > .frame::before { left: -5px; } :where(.lde-main) .sec > .frame::after { right: -5px; } :where(.lde-main) .sec.tinted { background: linear-gradient(180deg, var(--tint), #FFFFFF 85%); } :where(.lde-main) .pad { padding: 120px 48px; } :where(.lde-main) .pad-b0 { padding-bottom: 64px; } :where(.lde-main) .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-text); } :where(.lde-main) .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-wash); } :where(.lde-main) .eyebrow .i { font-size: 15px; } :where(.lde-main) .h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; font-weight: 700; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; } :where(.lde-main) .h2 em { font-style: normal; color: var(--blue); } :where(.lde-main) .lead { font-size: 18px; line-height: 1.65; color: var(--muted); text-wrap: pretty; max-width: 620px; } :where(.lde-main) .sec-head { display: flex; flex-direction: column; gap: 20px; max-width: 820px; } :where(.lde-main) .split-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px 64px; align-items: end; } :where(.lde-main) .btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .2s var(--ease), background .2s, box-shadow .3s, border-color .2s, color .2s; } :where(.lde-main) .btn-lg { height: 52px; padding: 0 24px; border-radius: 12px; font-size: 16px; } :where(.lde-main) .btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 9px; } :where(.lde-main) .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -10px var(--blue-glow), inset 0 1px 0 rgba(255, 255, 255, .18); } :where(.lde-main) .btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: 0 16px 34px -10px var(--blue-glow); } :where(.lde-main) .btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } :where(.lde-main) .btn-outline:hover { border-color: var(--line-strong); color: var(--blue); transform: translateY(-1px); } :where(.lde-main) .btn-white { background: #fff; color: var(--blue); } :where(.lde-main) .btn-white:hover { background: var(--tint); transform: translateY(-1px); } :where(.lde-main) .btn-glass { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .3); } :where(.lde-main) .btn-glass:hover { background: rgba(255, 255, 255, .2); } :where(.lde-main) .btn .i { font-size: 18px; transition: transform .2s var(--ease); } :where(.lde-main) .btn:hover .arrow { transform: translateX(3px); } :where(.lde-main) .rv { transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); } .lde-js :where(.lde-main) .rv:not(.in) { opacity: 0; transform: translateY(24px); filter: blur(6px); } :where(.lde-main) .rv[data-d="1"] { transition-delay: .08s; } :where(.lde-main) .rv[data-d="2"] { transition-delay: .16s; } :where(.lde-main) .rv[data-d="3"] { transition-delay: .24s; } :where(.lde-main) .rv[data-d="4"] { transition-delay: .32s; } :where(.lde-main) .nav { max-width: var(--frame); margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 36px; } :where(.lde-main) .nav-logo img { height: 24px; width: auto; } :where(.lde-main) .nav-links { display: flex; gap: 2px; flex: 1; } :where(.lde-main) .nav-links a { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s, background .2s; } :where(.lde-main) .nav-links a:hover { color: var(--ink); background: var(--bg-alt); } :where(.lde-main) .nav-cta { display: flex; align-items: center; gap: 10px; } :where(.lde-main) .nav-cta .login { padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--ink); } :where(.lde-main) .announce { display: flex; justify-content: center; align-items: center; gap: 10px; height: 40px; border-top: 1px solid var(--line); background: linear-gradient(90deg, #fff, var(--tint), #fff); font-size: 13px; color: var(--text); } :where(.lde-main) .announce .tag { padding: 3px 8px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; } :where(.lde-main) .announce a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; transition: color .2s; } :where(.lde-main) .announce a:hover { color: var(--blue); } :where(.lde-main) .announce .i { transition: transform .2s; } :where(.lde-main) .announce a:hover .i { transform: translateX(3px); } :where(.lde-main) .hero { position: relative; overflow: hidden; } :where(.lde-main) .hero-bg { position: absolute; inset: 0; pointer-events: none; } :where(.lde-main) .hero-bg .grid { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--blue) 22%, transparent) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 70% 50% at 50% 28%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 28%, #000 25%, transparent 75%); } :where(.lde-main) .hero-bg .glow { position: absolute; left: 50%; top: -360px; width: 1200px; height: 760px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 20%, transparent), transparent 72%); filter: blur(20px); animation: lde-breathe 9s ease-in-out infinite; } :where(.lde-main) .hero-bg .glow2 { position: absolute; left: 50%; top: 560px; width: 1500px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 14%, transparent), transparent 72%); filter: blur(30px); } @keyframes lde-breathe { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } } :where(.lde-main) .hero-bg svg.beams { position: absolute; inset: 0; width: 100%; height: 100%; } :where(.lde-main) .beam { fill: none; stroke-width: 1.4; opacity: .7; stroke-dasharray: 120 900; animation: lde-beam 7s linear infinite; } @keyframes lde-beam { from { stroke-dashoffset: 1020; } to { stroke-dashoffset: 0; } } :where(.lde-main) .hero-inner { position: relative; padding: 104px 48px 0; display: flex; flex-direction: column; align-items: center; text-align: center; } :where(.lde-main) .pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .85); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 500; color: var(--text); transition: border-color .2s; } :where(.lde-main) .pill:hover { border-color: var(--line-strong); } :where(.lde-main) .pill b { padding: 3px 9px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; } :where(.lde-main) h1.hero-h { margin-top: 28px; max-width: 1000px; font-size: clamp(42px, 7vw, 84px); line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; } :where(.lde-main) .rot { display: inline-block; position: relative; vertical-align: bottom; text-align: left; white-space: nowrap; } :where(.lde-main) .rot > span { position: absolute; left: 0; top: 0; padding-bottom: .08em; background: linear-gradient(100deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 60%, var(--green)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; filter: blur(12px); transform: translateY(.25em); transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease); } :where(.lde-main) .rot > span.on { position: relative; opacity: 1; filter: none; transform: none; } :where(.lde-main) .rot > span.out { opacity: 0; filter: blur(12px); transform: translateY(-.25em); } :where(.lde-main) .hero-h .accent { color: var(--blue-text); white-space: nowrap; } :where(.lde-main) .hero-sub { margin-top: 24px; max-width: 720px; font-size: 19px; line-height: 1.6; color: var(--muted); text-wrap: pretty; } :where(.lde-main) .hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } :where(.lde-main) .demo-label { margin-top: 80px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } :where(.lde-main) .demo-label .bar { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); } :where(.lde-main) .demo-label .bar.r { transform: scaleX(-1); } :where(.lde-main) .demo-wrap { position: relative; width: 100%; margin-top: 20px; perspective: 1600px; } :where(.lde-main) .demo { position: relative; overflow: hidden; text-align: left; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -1px 0 #fff inset, var(--shadow-blue), var(--shadow-lg); transform-origin: 50% 0; transition: transform 1.4s var(--ease), opacity 1.2s var(--ease); } .lde-js :where(.lde-main) .demo:not(.in) { transform: rotateX(14deg) scale(.96); opacity: 0; } :where(.lde-main) .win-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg-alt); } :where(.lde-main) .win-dots { display: flex; gap: 7px; } :where(.lde-main) .win-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); } :where(.lde-main) .win-title { flex: 1; text-align: center; font-size: 12px; font-weight: 500; color: var(--muted); } :where(.lde-main) .live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--green-wash); color: var(--green-ink); font-size: 12px; font-weight: 600; } :where(.lde-main) .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: lde-blink 1.6s ease-in-out infinite; } @keyframes lde-blink { 50% { opacity: .25; } } :where(.lde-main) .win-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 560px; } :where(.lde-main) .side { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--line); background: #fff; font-size: 13px; } :where(.lde-main) .side .ws { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } :where(.lde-main) .side .ws .sq { width: 28px; height: 28px; border-radius: 8px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 14px; } :where(.lde-main) .side .ws div { display: flex; flex-direction: column; line-height: 1.25; } :where(.lde-main) .side .ws b { font-size: 13px; font-weight: 600; color: var(--ink); } :where(.lde-main) .side .ws span { font-size: 11px; color: var(--muted); } :where(.lde-main) .side a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); } :where(.lde-main) .side a .i { font-size: 15px; } :where(.lde-main) .side a.on { background: var(--tint); color: var(--blue); font-weight: 600; } :where(.lde-main) .side .grp { margin: 16px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } :where(.lde-main) .side .rec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); transition: all .35s; } :where(.lde-main) .side .rec .i { font-size: 14px; } :where(.lde-main) .side .rec.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset, var(--shadow-sm); } :where(.lde-main) .side .rec.on .i { color: var(--blue); } :where(.lde-main) .main { display: flex; flex-direction: column; min-width: 0; background: var(--bg-alt); } :where(.lde-main) .stage { flex: 1; display: grid; grid-template-columns: minmax(170px, 230px) minmax(28px, 1fr) minmax(230px, 270px) minmax(28px, 1fr) minmax(200px, 250px); padding: 28px 28px 20px; align-items: stretch; } :where(.lde-main) .col-h { margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } :where(.lde-main) .queue { display: flex; flex-direction: column; justify-content: center; } :where(.lde-main) .qcard { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); transition: opacity .45s, transform .45s var(--ease), border-color .3s, box-shadow .3s; } :where(.lde-main) .qcard.cur { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash), 0 12px 28px -12px var(--blue-glow); } :where(.lde-main) .qcard .r1 { display: flex; justify-content: space-between; align-items: center; gap: 6px; } :where(.lde-main) .qcard .n { font-size: 13px; font-weight: 600; color: var(--ink); } :where(.lde-main) .badge { padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--blue); font-size: 10.5px; font-weight: 600; white-space: nowrap; } :where(.lde-main) .qcard .m { font-size: 11.5px; color: var(--muted); } :where(.lde-main) .qcard .s { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); } :where(.lde-main) .qcard .s.go { color: var(--blue); } :where(.lde-main) .qcard .s.ok .i { color: var(--green); } :where(.lde-main) .conn { width: 100%; height: 100%; overflow: visible; } :where(.lde-main) .conn path { fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 5 6; animation: lde-dash .8s linear infinite; transition: stroke .3s, stroke-width .3s; } @keyframes lde-dash { to { stroke-dashoffset: -22; } } :where(.lde-main) .engine { display: flex; flex-direction: column; justify-content: center; } :where(.lde-main) .ecard { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 18px 44px -16px var(--blue-glow); } :where(.lde-main) .ecard::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--blue) 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lde-spin 4s linear infinite; } @property --ang { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes lde-spin { to { --ang: 360deg; } } :where(.lde-main) .ehead { display: flex; align-items: center; gap: 12px; } :where(.lde-main) .ehead .core { width: 42px; height: 42px; border-radius: 12px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 20px; animation: lde-pulse 1.6s ease-out infinite; } @keyframes lde-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 40%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } } :where(.lde-main) .ehead div { display: flex; flex-direction: column; gap: 1px; } :where(.lde-main) .ehead b { font-size: 14px; font-weight: 600; color: var(--ink); } :where(.lde-main) .ehead span { min-height: 1.2em; font-size: 12.5px; font-weight: 500; color: var(--blue); } :where(.lde-main) .crit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } :where(.lde-main) .chip { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 600; transition: all .3s; } :where(.lde-main) .chip .i { font-size: 13px; } :where(.lde-main) .chip.active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 18px -8px var(--blue-glow); } :where(.lde-main) .chip.done { background: var(--tint); border-color: var(--tint); color: var(--blue); } :where(.lde-main) .efoot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); } :where(.lde-main) .efoot b { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); } :where(.lde-main) .reps { display: grid; grid-template-rows: repeat(5, 1fr); } :where(.lde-main) .rep { display: flex; align-items: center; } :where(.lde-main) .rep > div { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: all .35s var(--ease); } :where(.lde-main) .av { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--blue); font-size: 11px; font-weight: 700; } :where(.lde-main) .rep .who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } :where(.lde-main) .rep .who b { font-size: 12.5px; font-weight: 600; color: var(--ink); } :where(.lde-main) .rep .who span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.lde-main) .rep .st { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; } :where(.lde-main) .rep.out > div { opacity: .42; background: var(--bg-alt); } :where(.lde-main) .rep.win > div { border-color: var(--green); background: var(--green-wash); box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--green) 60%, transparent); } :where(.lde-main) .rep.win .st { color: var(--green-ink); } :where(.lde-main) .rep.win .av { background: var(--green); color: #fff; } :where(.lde-main) .log { position: relative; height: 116px; overflow: hidden; padding: 14px 28px 18px; border-top: 1px solid var(--line); background: #fff; font-family: var(--mono); font-size: 12px; line-height: 1.85; color: var(--muted); } :where(.lde-main) .log .ln { display: flex; gap: 14px; animation: lde-lnIn .45s var(--ease); } :where(.lde-main) .log .ln .t { min-width: 44px; color: var(--faint); } :where(.lde-main) .log .ln .k { color: var(--blue); } :where(.lde-main) .log .ln .g { color: var(--green-ink); font-weight: 500; } @keyframes lde-lnIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } } :where(.lde-main) .ask { display: flex; align-items: center; gap: 12px; margin: 0 28px 22px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); font-size: 13.5px; color: var(--muted); } :where(.lde-main) .main .ask { margin-top: 0; } :where(.lde-main) .ask .i { font-size: 16px; color: var(--blue); } :where(.lde-main) .ask .typed { flex: 1; color: var(--ink); } :where(.lde-main) .ask .typed::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--blue); animation: lde-blink 1s step-end infinite; } :where(.lde-main) .ask kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; font-family: var(--mono); font-size: 11px; color: var(--muted); } :where(.lde-main) .ask-wrap { background: #fff; padding-top: 0; } :where(.lde-main) .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.lde-main) .stat { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 40px 32px; border-right: 1px dashed var(--line); } :where(.lde-main) .stat:last-child { border-right: 0; } :where(.lde-main) .stat .num { display: flex; align-items: baseline; gap: 6px; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; } :where(.lde-main) .stat .num small { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--muted); } :where(.lde-main) .stat p { max-width: 240px; font-size: 14px; line-height: 1.5; color: var(--muted); } :where(.lde-main) .stat .ic { position: absolute; top: 28px; right: 28px; font-size: 20px; color: var(--blue); } :where(.lde-main) .reveal-sec .pad { padding-top: 140px; padding-bottom: 120px; } :where(.lde-main) .wr { max-width: 1040px; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; } :where(.lde-main) .wr .w { opacity: .12; filter: blur(5px); transition: opacity .35s, filter .35s, color .35s; } :where(.lde-main) .wr .w.on { opacity: 1; filter: none; } :where(.lde-main) .wr .w.hl.on { color: var(--blue); } :where(.lde-main) .maze { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 56px; } :where(.lde-main) .rule { position: relative; padding: 8px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; background: #fff; font-family: var(--mono); font-size: 13px; color: var(--muted); } :where(.lde-main) .rule::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; background: var(--muted); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); } :where(.lde-main) .maze.in .rule::after { transform: scaleX(1); } :where(.lde-main) .maze.in .rule:nth-child(2)::after { transition-delay: .15s; } :where(.lde-main) .maze.in .rule:nth-child(3)::after { transition-delay: .3s; } :where(.lde-main) .maze.in .rule:nth-child(4)::after { transition-delay: .45s; } :where(.lde-main) .maze.in .rule:nth-child(5)::after { transition-delay: .6s; } :where(.lde-main) .shift { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); border-top: 1px dashed var(--line); } :where(.lde-main) .shift > div { display: flex; flex-direction: column; gap: 12px; padding: 40px 32px; border-right: 1px dashed var(--line); } :where(.lde-main) .shift > div:last-child { border-right: 0; } :where(.lde-main) .shift .i { font-size: 22px; color: var(--blue); } :where(.lde-main) .shift h3 { margin-top: 16px; font-size: 18px; font-weight: 600; color: var(--ink); } :where(.lde-main) .shift p { font-size: 14.5px; line-height: 1.6; color: var(--muted); } :where(.lde-main) .shift .answer { position: relative; overflow: hidden; justify-content: space-between; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; } :where(.lde-main) .shift .answer::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(135deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000); } :where(.lde-main) .shift .answer p { position: relative; font-size: 21px; line-height: 1.4; font-weight: 600; color: #fff; text-wrap: pretty; } :where(.lde-main) .shift .answer .i { position: relative; font-size: 26px; color: #fff; } :where(.lde-main) .cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px dashed var(--line); } :where(.lde-main) .cell { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 40px 32px 44px; border-right: 1px dashed var(--line); } :where(.lde-main) .cell:last-child { border-right: 0; } :where(.lde-main) .spot::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--tint), transparent 65%); } :where(.lde-main) .spot:hover::before { opacity: 1; } :where(.lde-main) .cell .top { display: flex; justify-content: space-between; align-items: center; } :where(.lde-main) .icon-box { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--tint); color: var(--blue); font-size: 20px; } :where(.lde-main) .cell .no { font-family: var(--mono); font-size: 12px; color: var(--faint); } :where(.lde-main) .cell h3 { margin-top: 28px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); text-wrap: balance; } :where(.lde-main) .cell p { font-size: 15px; line-height: 1.6; color: var(--muted); } :where(.lde-main) .how { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-top: 1px dashed var(--line); } :where(.lde-main) .tabs { display: flex; flex-direction: column; border-right: 1px dashed var(--line); } :where(.lde-main) .tab { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 16px; padding: 22px 32px; border-bottom: 1px dashed var(--line); text-align: left; transition: background .3s; } :where(.lde-main) .tab:last-child { border-bottom: 0; } :where(.lde-main) .tab:hover { background: var(--bg-alt); } :where(.lde-main) .tab .k { padding-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--faint); transition: color .3s; } :where(.lde-main) .tab .tab-h { font-size: 17px; font-weight: 600; color: var(--muted); transition: color .3s; } :where(.lde-main) .tab p { grid-column: 2; max-height: 0; overflow: hidden; opacity: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); transition: max-height .5s var(--ease), opacity .4s, margin .4s; } :where(.lde-main) .tab .prog { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--blue); } :where(.lde-main) .tab.on .tab-h { color: var(--ink); } :where(.lde-main) .tab.on .k { color: var(--blue); } :where(.lde-main) .tab.on p { max-height: 100px; margin-top: 8px; opacity: 1; } :where(.lde-main) .console-wrap { display: flex; align-items: center; padding: 40px; background: radial-gradient(600px 400px at 70% 30%, var(--tint), transparent 70%); } :where(.lde-main) .console { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-lg); } :where(.lde-main) .console-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); } :where(.lde-main) .console-h > span:first-child { display: flex; align-items: center; gap: 8px; } :where(.lde-main) .console-h .i { color: var(--blue); } :where(.lde-main) .console-rec { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); } :where(.lde-main) .console-rec .av { width: 36px; height: 36px; font-size: 12px; } :where(.lde-main) .console-rec div { flex: 1; display: flex; flex-direction: column; line-height: 1.35; } :where(.lde-main) .console-rec b { font-size: 14px; font-weight: 600; color: var(--ink); } :where(.lde-main) .console-rec span { font-size: 12.5px; color: var(--muted); } :where(.lde-main) .steps { padding: 6px 18px 8px; } :where(.lde-main) .step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); transition: opacity .3s; } :where(.lde-main) .step:last-child { border-bottom: 0; } :where(.lde-main) .step .d { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); font-size: 10.5px; font-weight: 700; color: var(--muted); transition: all .3s; } :where(.lde-main) .step .d .i { font-size: 13px; } :where(.lde-main) .step.idle { opacity: .45; } :where(.lde-main) .step.active .d { background: var(--blue); border-color: var(--blue); color: #fff; animation: lde-pulse 1.4s ease-out infinite; } :where(.lde-main) .step.done .d { background: var(--green); border-color: var(--green); color: #fff; } :where(.lde-main) .step b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); } :where(.lde-main) .step .dt { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); } :where(.lde-main) .step.active .dt { color: var(--blue); } :where(.lde-main) .step .tm { padding-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); } :where(.lde-main) .sla { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--line-soft); } :where(.lde-main) .sla i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--blue); transition: width 1s linear; } :where(.lde-main) .console-f { display: flex; justify-content: space-between; padding: 13px 18px; border-top: 1px solid var(--line); background: var(--bg-alt); font-size: 12.5px; color: var(--muted); } :where(.lde-main) .console-f b { font-weight: 600; color: var(--ink); } :where(.lde-main) .console-f span { display: flex; align-items: center; gap: 6px; } :where(.lde-main) .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px dashed var(--line); } :where(.lde-main) .bc { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; grid-column: span 2; border-right: 1px dashed var(--line); border-bottom: 1px dashed var(--line); } :where(.lde-main) .bc.wide { grid-column: span 3; } :where(.lde-main) .bento > .bc:nth-child(2), :where(.lde-main) .bento > .bc:nth-child(5) { border-right: 0; } :where(.lde-main) .bento > .bc:nth-child(n+3) { border-bottom: 0; } :where(.lde-main) .viz { position: relative; height: 230px; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--bg-alt), transparent); } :where(.lde-main) .bc.wide .viz { height: 260px; } :where(.lde-main) .bc-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 32px; } :where(.lde-main) .bc-body .t { display: flex; align-items: center; justify-content: space-between; gap: 12px; } :where(.lde-main) .bc-body h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: var(--ink); } :where(.lde-main) .bc-body h3 .i { font-size: 18px; color: var(--blue-text); } :where(.lde-main) .bc-body p { font-size: 14.5px; line-height: 1.6; color: var(--muted); } :where(.lde-main) .by { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; } :where(.lde-main) .by em { font-style: normal; font-weight: 500; color: var(--muted); } :where(.lde-main) .rr { position: absolute; inset: 0; display: grid; place-items: center; } :where(.lde-main) .rr svg { width: 230px; height: 200px; overflow: visible; } :where(.lde-main) .rr .orbit { fill: none; stroke: var(--line); stroke-dasharray: 3 5; } :where(.lde-main) .rr .spoke { stroke: var(--line); stroke-width: 1; transition: stroke .4s; } :where(.lde-main) .rr .spoke.on { stroke: var(--blue-text); stroke-width: 1.6; } :where(.lde-main) .rr .hub { fill: var(--blue); } :where(.lde-main) .rr .hub-i { stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :where(.lde-main) .rr .node circle { fill: var(--surface); stroke: var(--line); transition: all .4s; } :where(.lde-main) .rr .node text { fill: var(--muted); font: 600 11px var(--font); text-anchor: middle; dominant-baseline: central; transition: fill .4s; } :where(.lde-main) .rr .node.on circle { fill: var(--blue); stroke: var(--blue); } :where(.lde-main) .rr .node.on text { fill: #fff; } :where(.lde-main) .wt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 30px 28px; } :where(.lde-main) .wt .row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 14px; align-items: center; font-size: 12.5px; color: var(--muted); } :where(.lde-main) .wt .row b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); } :where(.lde-main) .wt .blocks { display: flex; gap: 4px; overflow: hidden; } :where(.lde-main) .wt .blocks i { flex-shrink: 0; width: 14px; height: 22px; border-radius: 4px; background: var(--blue); animation: lde-pop .4s var(--ease); } :where(.lde-main) .wt .blocks i.g { background: color-mix(in srgb, var(--blue) 45%, #fff); } :where(.lde-main) .wt .cnt { text-align: right; font-family: var(--mono); color: var(--ink); } @keyframes lde-pop { from { transform: scale(.3); opacity: 0; } } :where(.lde-main) .pf { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px 28px; } :where(.lde-main) .pf .row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--text); } :where(.lde-main) .track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--line-soft); } :where(.lde-main) .track i { display: block; width: 0; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--blue) 75%, #fff); transition: width 1.2s var(--ease); } :where(.lde-main) .pf .row.top .track i { background: var(--green); } :where(.lde-main) .pf .v { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--muted); } :where(.lde-main) .pf .row.top .v { color: var(--green-ink); font-weight: 500; } :where(.lde-main) .pf .hot { position: absolute; top: 18px; right: 24px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 600; box-shadow: 0 8px 18px -8px var(--blue-glow); animation: lde-float 3s ease-in-out infinite; } @keyframes lde-float { 50% { transform: translateY(-4px); } } :where(.lde-main) .lb { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: flex-end; gap: 16px; padding: 30px 36px 26px; } :where(.lde-main) .lb .col { flex: 1; max-width: 64px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; } :where(.lde-main) .lb .tube { position: relative; flex: 1; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } :where(.lde-main) .lb .tube i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 60%, #fff), var(--blue)); transition: height .6s var(--ease); } :where(.lde-main) .lb .col.next .tube { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); } :where(.lde-main) .lb .col span { font-size: 11px; font-weight: 600; color: var(--muted); } :where(.lde-main) .lb .col.next span { color: var(--green-ink); } :where(.lde-main) .nr { position: absolute; inset: 0; } :where(.lde-main) .nr .map { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%); } :where(.lde-main) .nr svg { position: absolute; inset: 0; width: 100%; height: 100%; } :where(.lde-main) .nr .pin { fill: var(--surface); stroke: var(--faint); transition: all .4s; } :where(.lde-main) .nr .pin.on { fill: var(--green); stroke: var(--green); } :where(.lde-main) .nr .lead { fill: var(--blue); } :where(.lde-main) .nr .ripple { fill: none; stroke: var(--blue-text); opacity: 0; transform-box: fill-box; transform-origin: center; animation: lde-ripple 2.4s ease-out infinite; } @keyframes lde-ripple { 0% { opacity: .7; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.2); } } :where(.lde-main) .nr .link { stroke: var(--green); stroke-width: 1.6; stroke-dasharray: 4 4; animation: lde-dash .8s linear infinite; } :where(.lde-main) .ai-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px dashed var(--line); } :where(.lde-main) .ac { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; grid-column: span 2; border-right: 1px dashed var(--line); border-bottom: 1px dashed var(--line); } :where(.lde-main) .ac.w3 { grid-column: span 3; } :where(.lde-main) .ac.end { border-right: 0; } :where(.lde-main) .ac.last { border-bottom: 0; } :where(.lde-main) .ac .shot { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; height: 300px; min-height: 0; padding: 28px; background: linear-gradient(180deg, var(--tint), #fff); } :where(.lde-main) .ac .shot::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--blue) 18%, transparent) 1px, transparent 1px); background-size: 20px 20px; mask-image: linear-gradient(180deg, #000, transparent 80%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); } :where(.lde-main) .ac .shot img { position: relative; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg); } :where(.lde-main) .ac .body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px 28px 30px; } :where(.lde-main) .ac h3 { font-size: 18px; font-weight: 600; color: var(--ink); } :where(.lde-main) .ac p { font-size: 14.5px; line-height: 1.6; color: var(--muted); } :where(.lde-main) .tagline { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--tint); color: var(--blue); font-size: 11.5px; font-weight: 600; } :where(.lde-main) .ai-bento > .ac:nth-child(-n+3) .shot { height: 360px; } @media (max-width: 1100px) { :where(.lde-main) .ai-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.lde-main) .ac, :where(.lde-main) .ac.w3 { grid-column: span 1; border-right: 1px dashed var(--line) !important; border-bottom: 1px dashed var(--line) !important; } :where(.lde-main) .ac:nth-child(2n) { border-right: 0 !important; } :where(.lde-main) .ai-bento > .ac:nth-child(-n+3) .shot { height: 320px; } } @media (max-width: 900px) { :where(.lde-main) .ai-bento { grid-template-columns: minmax(0, 1fr); } :where(.lde-main) .ac, :where(.lde-main) .ac.w3 { grid-column: auto; border-right: 0 !important; } :where(.lde-main) .ac .shot { height: 240px; padding: 20px; } :where(.lde-main) .ai-bento > .ac:first-child .shot { height: 400px; } :where(.lde-main) .ai-bento > .ac:nth-child(2) .shot, :where(.lde-main) .ai-bento > .ac:nth-child(3) .shot { height: 240px; } } :where(.lde-main) .explain { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; } :where(.lde-main) .checks { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; } :where(.lde-main) .checks > div { display: flex; gap: 14px; } :where(.lde-main) .checks .icon-box { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; } :where(.lde-main) .checks p { font-size: 15px; line-height: 1.6; color: var(--muted); } :where(.lde-main) .checks strong { font-weight: 600; color: var(--ink); } :where(.lde-main) .stack { position: relative; padding: 0 0 14.5% 60px; } :where(.lde-main) .stack .back { position: absolute; left: 0; bottom: 0; width: 78%; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-md); opacity: .95; transition: transform .8s var(--ease); } :where(.lde-main) .stack .front { position: relative; width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-blue), var(--shadow-lg); transition: transform .8s var(--ease); } :where(.lde-main) .stack:hover .back { transform: translate(-8px, 8px); } :where(.lde-main) .stack:hover .front { transform: translate(6px, -6px); } :where(.lde-main) .hotspot { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-md); } :where(.lde-main) .hotspot i { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); } :where(.lde-main) .hotspot i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--blue); animation: lde-ring 1.8s ease-out infinite; } @keyframes lde-ring { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } } :where(.lde-main) .hotspot.g i, :where(.lde-main) .hotspot.g i::after { background: var(--green); border-color: var(--green); } :where(.lde-main) .hotspot.g i { background: var(--green); } :where(.lde-main) .roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px dashed var(--line); } :where(.lde-main) .role { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 40px 32px 44px; border-right: 1px dashed var(--line); } :where(.lde-main) .role:last-child { border-right: 0; } :where(.lde-main) .role > .i { font-size: 26px; color: var(--blue); } :where(.lde-main) .role h3 { margin-top: 56px; font-size: 20px; font-weight: 600; color: var(--ink); } :where(.lde-main) .role p { font-size: 15px; line-height: 1.6; color: var(--muted); } :where(.lde-main) .role .go { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font-size: 13px; font-weight: 600; color: var(--blue); opacity: 0; transform: translateY(6px); transition: all .3s var(--ease); } :where(.lde-main) .role:hover .go { opacity: 1; transform: none; } :where(.lde-main) .faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; } :where(.lde-main) .faq-grid .sec-head { position: sticky; top: 140px; align-self: start; } :where(.lde-main) .faq { border-top: 1px solid var(--line); } :where(.lde-main) .fq { border-bottom: 1px solid var(--line); } :where(.lde-main) .fq button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; text-align: left; font-size: 17px; font-weight: 600; color: var(--ink); } :where(.lde-main) .fq .pm { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; transition: transform .4s var(--ease), background .3s, border-color .3s, color .3s; } :where(.lde-main) .fq .pm .i { font-size: 14px; } :where(.lde-main) .fq.open .pm { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); color: #fff; } :where(.lde-main) .fq .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } :where(.lde-main) .fq.open .ans { grid-template-rows: 1fr; } :where(.lde-main) .fq .ans > div { overflow: hidden; } :where(.lde-main) .fq .ans p { padding: 0 48px 24px 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); } :where(.lde-main) .cta { position: relative; overflow: hidden; text-align: center; background: linear-gradient(160deg, var(--blue), var(--blue-deep)); border-bottom: 0; } :where(.lde-main) .cta .frame { border-color: rgba(255, 255, 255, .14); } :where(.lde-main) .cta .pad { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 150px 48px; } :where(.lde-main) .cta-bg { position: absolute; inset: 0; pointer-events: none; } :where(.lde-main) .cta-bg .dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); } :where(.lde-main) .cta-bg .ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; transform: translate(-50%, -50%); } :where(.lde-main) .cta-bg .ring:nth-child(2) { width: 420px; height: 420px; } :where(.lde-main) .cta-bg .ring:nth-child(3) { width: 680px; height: 680px; border-style: dashed; } :where(.lde-main) .cta-bg .ring:nth-child(4) { width: 960px; height: 960px; } :where(.lde-main) .cta-bg .sat { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px var(--green); animation: lde-orbit 14s linear infinite; } :where(.lde-main) .cta-bg .sat.b { --r: 480px; background: #fff; box-shadow: 0 0 14px #fff; animation-duration: 22s; animation-direction: reverse; } @keyframes lde-orbit { from { transform: rotate(0) translateX(var(--r, 340px)); } to { transform: rotate(360deg) translateX(var(--r, 340px)); } } :where(.lde-main) .cta .eyebrow { color: var(--sales-tint); } :where(.lde-main) .cta h2 { position: relative; font-size: clamp(40px, 6vw, 76px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; color: #fff; text-wrap: balance; } :where(.lde-main) .cta p { position: relative; font-size: 19px; color: color-mix(in srgb, var(--sales-tint) 85%, transparent); } :where(.lde-main) .cta .hero-cta { position: relative; margin-top: 12px; } :where(.lde-main) .foot { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; padding: 72px 48px 48px; } :where(.lde-main) .foot .brand { display: flex; flex-direction: column; gap: 18px; max-width: 320px; } :where(.lde-main) .foot .brand img { height: 26px; width: auto; align-self: flex-start; } :where(.lde-main) .foot .brand p { font-size: 14px; line-height: 1.6; } :where(.lde-main) .foot .colf { display: flex; flex-direction: column; gap: 11px; font-size: 14px; } :where(.lde-main) .foot .colf span { margin-bottom: 5px; font-size: 13px; font-weight: 600; color: #E5E7EB; } :where(.lde-main) .foot .colf a { transition: color .2s; } :where(.lde-main) .foot .colf a:hover { color: #fff; } :where(.lde-main) .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 48px; border-top: 1px dashed rgba(255, 255, 255, .1); font-size: 13px; } :where(.lde-main) .legal div { display: flex; gap: 22px; } :where(.lde-main) .legal a:hover { color: #fff; } @media (max-width: 1100px) { :where(.lde-main) .win-body { grid-template-columns: minmax(0, 1fr); } :where(.lde-main) .side { display: none; } :where(.lde-main) .cells, :where(.lde-main) .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 7.5%; padding-right: 7.5%;} :where(.lde-main) .cell:nth-child(2), :where(.lde-main) .role:nth-child(2) { border-right: 0; } :where(.lde-main) .cell:nth-child(-n+2), :where(.lde-main) .role:nth-child(-n+2) { border-bottom: 1px dashed var(--line); } :where(.lde-main) .shift { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.lde-main) .shift > div:nth-child(2) { border-right: 0; } :where(.lde-main) .shift > div:nth-child(-n+2) { border-bottom: 1px dashed var(--line); } :where(.lde-main) .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.lde-main) .stat:nth-child(2) { border-right: 0; } :where(.lde-main) .stat:nth-child(-n+2) { border-bottom: 1px dashed var(--line); } :where(.lde-main) .explain { grid-template-columns: minmax(0, 1fr); gap: 48px; } } @media (max-width: 900px) { :where(.lde-main) .nav-links, :where(.lde-main) .nav-cta .login { display: none; } :where(.lde-main) .nav { justify-content: space-between; } :where(.lde-main) .pad { padding: 88px 20px; padding-left: 7.5% !important; padding-right: 7.5% !important;} :where(.lde-main) .pad-b0 { padding-bottom: 48px;padding-left: 7.5%; padding-right: 7.5%; } :where(.lde-main) .hero-inner { padding: 80px 16px 0; padding-left: 7.5%; padding-right: 7.5%;} :where(.lde-main) .stage { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 16px; } :where(.lde-main) .stage .conn { display: none; } :where(.lde-main) .queue .qcard:nth-child(n+3) { display: none; } :where(.lde-main) .reps { grid-template-rows: none; gap: 8px; } :where(.lde-main) .log { padding: 12px 16px; padding-left: 7.5%; padding-right: 7.5%;} :where(.lde-main) .ask { margin: 0 16px 16px; } :where(.lde-main) .how, :where(.lde-main) .faq-grid { grid-template-columns: minmax(0, 1fr); padding-left: 7.5%; padding-right: 7.5%;} :where(.lde-main) .tabs { border-right: 0; border-bottom: 1px dashed var(--line); } :where(.lde-main) .tab { padding: 20px; } :where(.lde-main) .console-wrap { padding: 20px 16px; padding-left: 0; padding-right: 0;} :where(.lde-main) .bento { grid-template-columns: minmax(0, 1fr); } :where(.lde-main) .bc, :where(.lde-main) .bc.wide { grid-column: auto; border-right: 0 !important; border-bottom: 1px dashed var(--line) !important; } :where(.lde-main) .bc:last-child { border-bottom: 0 !important; } :where(.lde-main) .stack { padding: 0 0 16% 24px; } :where(.lde-main) .hotspot { display: none; } :where(.lde-main) .faq-grid { gap: 32px; } :where(.lde-main) .faq-grid .sec-head { position: static; } :where(.lde-main) .foot { grid-template-columns: repeat(2, 1fr); padding: 56px 20px 36px; } :where(.lde-main) .foot .brand { grid-column: 1 / -1; } :where(.lde-main) .legal { padding: 20px; } } @media (max-width: 600px) { :where(.lde-main) .announce { font-size: 12px; } :where(.lde-main) .announce .hide-sm { display: none; } :where(.lde-main) .cells, :where(.lde-main) .roles, :where(.lde-main) .shift, :where(.lde-main) .stats { grid-template-columns: minmax(0, 1fr); } :where(.lde-main) .cell, :where(.lde-main) .role, :where(.lde-main) .shift > div, :where(.lde-main) .stat { border-right: 0 !important; border-bottom: 1px dashed var(--line);padding-left: 0; } :where(.lde-main) .cell:last-child, :where(.lde-main) .role:last-child, :where(.lde-main) .shift > div:last-child, :where(.lde-main) .stat:last-child { border-bottom: 0; } :where(.lde-main) .hero-sub { font-size: 17px; } :where(.lde-main) .wt .row, :where(.lde-main) .pf .row { grid-template-columns: 80px minmax(0, 1fr) 36px; } :where(.lde-main) .cta .pad { padding: 110px 20px; } } @media (prefers-reduced-motion: reduce) { .lde-main *, .lde-main *::before, .lde-main *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } :where(.lde-main) .rv, :where(.lde-main) .demo { opacity: 1; transform: none; filter: none; } :where(.lde-main) .wr .w { opacity: 1; filter: none; } } :where(.lde-main) .hero.dark .hero-bg .grid { background-image: radial-gradient(rgba(239, 246, 255, .13) 1px, transparent 1px); } :where(.lde-main) .hero.dark .hero-bg .glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 55%, transparent), transparent 70%); filter: blur(30px); } :where(.lde-main) .hero.dark .hero-bg .glow2 { background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 32%, transparent), transparent 72%); filter: blur(40px); } :where(.lde-main) .hero.dark .beam { opacity: .5; } :where(.lde-main) .dark .pill { background: rgba(255, 255, 255, .04); border-color: var(--line-strong); color: var(--text); box-shadow: none; backdrop-filter: blur(6px); } :where(.lde-main) .dark .pill:hover { border-color: rgba(239, 246, 255, .3); } :where(.lde-main) .dark .rot > span { background-image: linear-gradient(100deg, #fff 0%, var(--sales-tint) 30%, color-mix(in srgb, var(--blue) 45%, #fff) 100%); } :where(.lde-main) .dark .btn-outline { background: rgba(255, 255, 255, .06); color: #fff; border-color: var(--line-strong); box-shadow: none; } :where(.lde-main) .dark .btn-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; } :where(.lde-main) .hero.dark .demo { border-color: rgba(239, 246, 255, .16); box-shadow: 0 40px 120px -20px color-mix(in srgb, var(--blue) 55%, transparent); } :where(.lde-main) .cta.dark { background: #0A0A0A; } :where(.lde-main) .cta.dark .frame { border-color: var(--line); } :where(.lde-main) .cta.dark .cta-bg .dots { background-image: radial-gradient(rgba(239, 246, 255, .12) 1px, transparent 1px); } :where(.lde-main) .cta.dark .cta-bg .ring { border-color: var(--line); } :where(.lde-main) .cta-bg .orb { position: absolute; left: 50%; top: 50%; width: 640px; height: 440px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 60%, transparent), transparent); filter: blur(40px); opacity: .8; animation: lde-breathe2 8s ease-in-out infinite; } @keyframes lde-breathe2 { 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } } :where(.lde-main) .cta.dark .eyebrow { color: var(--blue-text); } :where(.lde-main) .cta.dark p { color: var(--muted); } :where(.lde-main) .cta.dark .btn-white { color: #0A0A0A; } :where(.lde-main) .cta.dark .btn-white:hover { background: var(--sales-tint); } :where(.lde-main) .proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(.lde-main) .proof > div { display: flex; align-items: center; gap: 14px; padding: 30px 40px; border-right: 1px dashed var(--line); font-size: 16px; font-weight: 500; color: var(--ink); } :where(.lde-main) .proof > div:last-child { border-right: 0; } :where(.lde-main) .proof .i { font-size: 22px; color: var(--blue); } @media (max-width: 900px) { :where(.lde-main) .proof { grid-template-columns: minmax(0, 1fr); } :where(.lde-main) .proof > div { padding: 22px 20px; border-right: 0; border-bottom: 1px dashed var(--line); } :where(.lde-main) .proof > div:last-child { border-bottom: 0; } } :where(.lde-main) .reveal-sec .wr { margin-top: 40px; font-size: clamp(24px, 3.2vw, 40px); font-weight: 500; line-height: 1.25; } :where(.lde-main) .ai-bento .ac { border-bottom: 0; } :where(.lde-main) .ai-bento > .ac .shot { height: 360px; } @media (max-width: 1100px) { :where(.lde-main) .ai-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(.lde-main) .ai-bento > .ac { border-bottom: 0 !important; } :where(.lde-main) .ai-bento > .ac:nth-child(2n) { border-right: 1px dashed var(--line) !important; } :where(.lde-main) .ai-bento > .ac:last-child { border-right: 0 !important; } :where(.lde-main) .ai-bento > .ac .shot { height: 300px; } } @media (max-width: 900px) { :where(.lde-main) .ai-bento { grid-template-columns: minmax(0, 1fr); } :where(.lde-main) .ai-bento > .ac { border-right: 0 !important; border-bottom: 1px dashed var(--line) !important; } :where(.lde-main) .ai-bento > .ac:last-child { border-bottom: 0 !important; } :where(.lde-main) .ai-bento > .ac .shot, :where(.lde-main) .ai-bento > .ac:first-child .shot, :where(.lde-main) .ai-bento > .ac:nth-child(2) .shot { height: 260px; } :where(.lde-main) .ai-bento > .ac:last-child .shot { height: 400px; } } :where(.lde-main) .pill { letter-spacing: .12em; font-size: 12px; font-weight: 600; padding: 7px 14px; } :where(.lde-main) .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-wash); } :where(.lde-main) .bc-body .bf { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } :where(.lde-main) .dark .eyebrow { color: color-mix(in srgb, var(--sales-tint) 88%, transparent); } :where(.lde-main) .dark .eyebrow .dot, :where(.lde-main) .dark .eyebrow-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent), 0 0 10px color-mix(in srgb, var(--green) 70%, transparent); } :where(.lde-main) .dark .pill { color: var(--sales-tint); } :where(.lde-main) .tour { width: 100%; margin-top: 96px; perspective: 1600px; text-align: left; } :where(.lde-main) .tour .demo { border-radius: 18px 18px 0 0; border-bottom: 0; } :where(.lde-main) .tour .win-body { min-height: 0; } :where(.lde-main) .tour .ask-wrap { padding: 0 28px 22px; background: #fff; } :where(.lde-main) .tour .ask { margin: 0; } :where(.lde-main) .stages { position: relative; height: 400px; overflow: hidden; } :where(.lde-main) .stages > .st { height: 100%; animation: lde-stIn .45s var(--ease); } :where(.lde-main) .stages > .st > * { height: 100%; } @keyframes lde-stIn { from { opacity: 0; transform: translateY(8px); } } :where(.lde-main) .narr { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 12px 28px; border-top: 1px solid var(--line); background: #fff; } :where(.lde-main) .narr-k { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 5px 10px; border-radius: 999px; background: var(--tint); color: var(--blue); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } :where(.lde-main) .narr-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: lde-blink 1.4s ease-in-out infinite; } :where(.lde-main) .narr-t { flex: 1; font-size: 14.5px; font-weight: 500; color: var(--ink); } :where(.lde-main) .narr-t.in { animation: lde-lnIn .45s var(--ease); } :where(.lde-main) .narr-steps { display: flex; gap: 5px; flex-shrink: 0; } :where(.lde-main) .narr-steps i { width: 18px; height: 4px; border-radius: 999px; background: var(--line); transition: background .3s; } :where(.lde-main) .narr-steps i.on { background: var(--blue); } :where(.lde-main) .s1 { padding: 22px 28px; } :where(.lde-main) .qcard .hot { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 600; } :where(.lde-main) .qcard .hot .i { font-size: 12px; } :where(.lde-main) .rep .conv { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); } :where(.lde-main) .rep.rank > div { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); } :where(.lde-main) .rep.rank .conv { color: var(--blue); font-weight: 600; } :where(.lde-main) .rep.win .conv { display: none; } :where(.lde-main) .s2 { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 26px 32px; } :where(.lde-main) .s2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; } :where(.lde-main) .s2-top .qcard { margin: 0; justify-content: center; } :where(.lde-main) .sla-panel { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .3s, box-shadow .3s; } :where(.lde-main) .sla-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); } :where(.lde-main) .sla-tag { padding: 2px 9px; border-radius: 999px; background: var(--tint); color: var(--blue); font-size: 11px; } :where(.lde-main) .sla-time { display: flex; align-items: baseline; gap: 6px; } :where(.lde-main) .sla-time b { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--ink); } :where(.lde-main) .sla-time span { font-family: var(--mono); font-size: 13px; color: var(--faint); } :where(.lde-main) .sla-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--line-soft); } :where(.lde-main) .sla-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--blue); } :where(.lde-main) .sla-panel.risk { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .06); animation: lde-riskPulse 1s ease-in-out infinite; } :where(.lde-main) .sla-panel.risk .sla-tag { background: var(--ink); color: #fff; } :where(.lde-main) .sla-panel.risk .sla-bar i { background: var(--ink); } :where(.lde-main) .sla-panel.met { border-color: var(--green); } :where(.lde-main) .sla-panel.met .sla-tag { background: var(--green-wash); color: var(--green-ink); } :where(.lde-main) .sla-panel.met .sla-bar i { background: var(--green); } @keyframes lde-riskPulse { 50% { box-shadow: 0 0 0 7px rgba(10, 10, 10, .04); } } :where(.lde-main) .s2-reps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } :where(.lde-main) .sla-rep { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: all .4s var(--ease); } :where(.lde-main) .sla-rep .top { display: flex; align-items: center; gap: 10px; } :where(.lde-main) .sla-rep .who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; } :where(.lde-main) .sla-rep .who b { font-size: 13px; font-weight: 600; color: var(--ink); } :where(.lde-main) .sla-rep .who span { font-size: 11.5px; color: var(--muted); } :where(.lde-main) .sla-rep .ring { width: 30px; height: 30px; transform: rotate(-90deg); } :where(.lde-main) .sla-rep .ring circle { fill: none; stroke: var(--line-soft); stroke-width: 4; } :where(.lde-main) .sla-rep .ring .arc { stroke: var(--blue); stroke-linecap: round; } :where(.lde-main) .sla-rep .state { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 12px; font-weight: 600; color: var(--muted); } :where(.lde-main) .sla-rep .state .i { font-size: 14px; } :where(.lde-main) .sla-rep.live { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash), 0 14px 30px -16px var(--blue-glow); } :where(.lde-main) .sla-rep.live .state { color: var(--blue); } :where(.lde-main) .sla-rep.risk { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .06); } :where(.lde-main) .sla-rep.risk .state { color: var(--ink); } :where(.lde-main) .sla-rep.risk .ring .arc { stroke: var(--ink); } :where(.lde-main) .sla-rep.out { opacity: .45; background: var(--bg-alt); } :where(.lde-main) .sla-rep.done { border-color: var(--green); background: var(--green-wash); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--green) 50%, transparent); } :where(.lde-main) .sla-rep.done .state { color: var(--green-ink); } :where(.lde-main) .sla-rep.done .ring .arc { stroke: var(--green); } :where(.lde-main) .sla-rep.done .av { background: var(--green); color: #fff; } :where(.lde-main) .s3 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; padding: 24px 28px; align-items: center; } :where(.lde-main) .rule-card, :where(.lde-main) .ai-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); } :where(.lde-main) .rule-h, :where(.lde-main) .ai-h { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; font-weight: 600; color: var(--ink); } :where(.lde-main) .rule-h .rule-t { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; } :where(.lde-main) .rule-h .rule-t .i, :where(.lde-main) .ai-h > .i { color: var(--blue); font-size: 15px; } :where(.lde-main) .rule-h .live, :where(.lde-main) .ai-h .live { margin-left: auto; } :where(.lde-main) .rule-lbl { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } :where(.lde-main) .conds { display: flex; flex-direction: column; gap: 6px; } :where(.lde-main) .cond { display: flex; gap: 6px; } :where(.lde-main) .cond span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-alt); font-size: 12.5px; color: var(--ink); } :where(.lde-main) .cond .op { color: var(--muted); background: #fff; } :where(.lde-main) .cond .val { font-weight: 600; } :where(.lde-main) .cond.new { animation: lde-condIn .6s var(--ease); } :where(.lde-main) .cond.new span { border-color: var(--blue); background: var(--tint); color: var(--blue); } :where(.lde-main) .and { align-self: flex-start; margin-left: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); } :where(.lde-main) .and.new { animation: lde-condIn .6s var(--ease); } @keyframes lde-condIn { from { opacity: 0; transform: translateY(-6px); } } :where(.lde-main) .methods { display: flex; flex-wrap: wrap; gap: 6px; } :where(.lde-main) .methods span { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); transition: all .35s var(--ease); } :where(.lde-main) .methods span.on { border-color: var(--blue); background: var(--blue); color: #fff; } :where(.lde-main) .toast { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 12px; border-radius: 10px; background: var(--green-wash); color: var(--green-ink); font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); } :where(.lde-main) .toast.in { opacity: 1; transform: none; } :where(.lde-main) .preview { display: flex; flex-direction: column; gap: 10px; } :where(.lde-main) .preview .qcard { margin: 0; transition: opacity .45s, transform .45s var(--ease); } :where(.lde-main) .route { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; background: #fff; transition: opacity .45s; } :where(.lde-main) .route .k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue); } :where(.lde-main) .route .rep > div { padding: 8px 10px; } :where(.lde-main) .s4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; padding: 24px 28px; align-items: center; } :where(.lde-main) .ai-h .learn { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--bg-alt); color: var(--faint); font-size: 11px; font-weight: 600; } :where(.lde-main) .ai-h .learn.on { background: var(--tint); color: var(--blue); animation: lde-blink 1s ease-in-out infinite; } :where(.lde-main) .goals { display: flex; flex-wrap: wrap; gap: 6px; } :where(.lde-main) .goals span { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); transition: all .35s var(--ease); } :where(.lde-main) .goals span.on { border-color: var(--blue); background: var(--tint); color: var(--blue); } :where(.lde-main) .wts, :where(.lde-main) .share { display: flex; flex-direction: column; gap: 10px; } :where(.lde-main) .wt-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 38px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text); } :where(.lde-main) .wt-row b { text-align: right; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); } :where(.lde-main) .wt-row .track i { width: 0; background: var(--blue); transition: width .9s var(--ease); } :where(.lde-main) .share .wt-row:first-child .track i { background: var(--green); } :where(.lde-main) .conf { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-alt); opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s var(--ease), border-color .3s; } :where(.lde-main) .conf.in { opacity: 1; transform: none; border-color: var(--green); background: var(--green-wash); } :where(.lde-main) .conf > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; } :where(.lde-main) .conf b { font-size: 12.5px; color: var(--ink); } :where(.lde-main) .conf > span:nth-child(2) span { font-size: 11.5px; color: var(--muted); } :where(.lde-main) .conf .score { display: flex; flex-direction: column; align-items: center; font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--green-ink); line-height: 1; } :where(.lde-main) .conf .score small { font-family: var(--font); font-size: 9.5px; color: var(--muted); } @media (max-width: 900px) { :where(.lde-main) .tour { margin-top: 64px; } :where(.lde-main) .tour .ask-wrap { padding: 0 16px 16px; } :where(.lde-main) .stages { height: auto; min-height: 420px; } :where(.lde-main) .s1, :where(.lde-main) .s2, :where(.lde-main) .s3, :where(.lde-main) .s4 { padding: 18px 16px; } :where(.lde-main) .s2-top, :where(.lde-main) .s2-reps, :where(.lde-main) .s3, :where(.lde-main) .s4 { grid-template-columns: minmax(0, 1fr); } :where(.lde-main) .narr { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; } :where(.lde-main) .narr-t { flex-basis: 100%; order: 3; font-size: 14px; } } :where(.lde-main) .tour-tabs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .03); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } :where(.lde-main) .tt { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px 14px; border-radius: 11px; text-align: left; transition: background .3s, box-shadow .3s; } :where(.lde-main) .tt:hover { background: rgba(255, 255, 255, .05); } :where(.lde-main) .tt-ic { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .06); color: var(--muted); font-size: 15px; transition: background .3s, color .3s, box-shadow .3s; } :where(.lde-main) .tt-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :where(.lde-main) .tt-tx b { font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--sales-tint) 72%, transparent); transition: color .3s; } :where(.lde-main) .tt-tx span { font-size: 12.5px; line-height: 1.4; color: var(--muted); } :where(.lde-main) .tt-prog { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 999px; background: transparent; } :where(.lde-main) .tt-prog::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--sales-tint)); } :where(.lde-main) .tt.on { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 30%, transparent), color-mix(in srgb, var(--blue) 12%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 55%, transparent), 0 14px 34px -18px var(--blue-glow); } :where(.lde-main) .tt.on .tt-ic { background: var(--blue); color: #fff; box-shadow: 0 6px 16px -6px var(--blue-glow); } :where(.lde-main) .tt.on .tt-tx b { color: #fff; } :where(.lde-main) .tt.on .tt-tx span { color: color-mix(in srgb, var(--sales-tint) 78%, transparent); } :where(.lde-main) .tt.on .tt-prog { background: rgba(239, 246, 255, .12); } @media (max-width: 1100px) { :where(.lde-main) .tt-tx span { display: none; } :where(.lde-main) .tt { align-items: center; padding: 10px 10px 13px; } } @media (max-width: 900px) { :where(.lde-main) .tour-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; } :where(.lde-main) .tour-tabs::-webkit-scrollbar { display: none; } :where(.lde-main) .tt { flex: 0 0 auto; } :where(.lde-main) .tt-tx b { white-space: nowrap; font-size: 13px; } } @media (min-width: 901px) { :where(.lde-main) .hero-inner { padding-top: 40px; } :where(.lde-main) h1.hero-h { margin-top: 18px; font-size: clamp(40px, 4.6vw, 60px); } :where(.lde-main) .hero-sub { margin-top: 14px; font-size: 17px; max-width: 680px; } :where(.lde-main) .hero-cta { margin-top: 22px; } :where(.lde-main) .hero-cta .btn-lg { height: 48px; } :where(.lde-main) .tour { margin-top: 30px; } :where(.lde-main) .tour-tabs { margin-bottom: 10px; padding: 4px; } :where(.lde-main) .tt { gap: 9px; padding: 8px 10px 11px; } :where(.lde-main) .tt-ic { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; } :where(.lde-main) .tt-tx b { font-size: 13px; } :where(.lde-main) .tt-tx span { font-size: 11.5px; line-height: 1.35; } :where(.lde-main) .tt-prog { bottom: 4px; } :where(.lde-main) .tour .win-bar { height: 34px; } :where(.lde-main) .tour .win-title { font-size: 11px; } :where(.lde-main) .tour .side { padding: 10px 8px; font-size: 12px; } :where(.lde-main) .tour .side .ws { padding: 4px 6px 10px; margin-bottom: 4px; } :where(.lde-main) .tour .side .ws .sq { width: 24px; height: 24px; font-size: 12px; } :where(.lde-main) .tour .side a, :where(.lde-main) .tour .side .rec { padding: 6px 8px; } :where(.lde-main) .tour .side .grp { margin: 10px 8px 4px; } :where(.lde-main) .tour .win-body { grid-template-columns: 190px minmax(0, 1fr); } :where(.lde-main) .stages { height: 252px; } :where(.lde-main) .stages > .st { zoom: .76; height: calc(252px / .76); } :where(.lde-main) .tour .log { height: 74px; padding: 9px 28px 8px; font-size: 11px; line-height: 1.75; } :where(.lde-main) .tour .ask-wrap { padding: 0 28px 14px; } :where(.lde-main) .tour .ask { padding: 8px 12px; font-size: 13px; } } @media (min-width: 901px) { :where(.lde-main) .hero-inner { padding-top: 26px; } :where(.lde-main) .tt-tx { min-width: 0; } :where(.lde-main) .tt-tx span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.lde-main) .tt { align-items: center; } :where(.lde-main) .stages { height: 238px; } :where(.lde-main) .stages > .st { height: calc(238px / .76); } :where(.lde-main) .tour .log { height: 70px; } :where(.lde-main) .tour .ask-wrap { padding-bottom: 12px; } } @media (min-width: 901px) { :where(.lde-main) .hero-inner { padding-top: 22px; } :where(.lde-main) h1.hero-h { margin-top: 14px; font-size: clamp(40px, 4.2vw, 54px); } :where(.lde-main) .hero-sub { margin-top: 12px; font-size: 16.5px; } :where(.lde-main) .hero-cta { margin-top: 20px; } :where(.lde-main) .tour { margin-top: 26px; } :where(.lde-main) .stages { height: 226px; } :where(.lde-main) .stages > .st { zoom: .72; height: calc(226px / .72); } } :where(.lde-main) .s1 { grid-template-rows: minmax(0, 1fr); } :where(.lde-main) .s1 > * { min-height: 0; } :where(.lde-main) .s1 .conn { height: 100%; } :where(.lde-main) .s3 .conds { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; } :where(.lde-main) .s3 .and { align-self: center; margin: 0 2px; } :where(.lde-main) .s3 { padding: 18px 24px; } :where(.lde-main) .s3 .rule-card { gap: 8px; padding: 14px 18px; } :where(.lde-main) .tour .side a, :where(.lde-main) .tour .side .rec { white-space: nowrap; } @media (min-width: 901px) { :where(.lde-main) .stages { height: 300px; } :where(.lde-main) .stages > .st { zoom: .8; height: calc(300px / .8); } :where(.lde-main) .tour .log { height: 78px; padding: 10px 28px 10px; font-size: 11.5px; } :where(.lde-main) .tour .ask-wrap { padding-bottom: 18px; } :where(.lde-main) .tour .ask { padding: 10px 14px; font-size: 13.5px; } } @media (min-width: 901px) { :where(.lde-main) h1.hero-h { font-size: clamp(42px, 7vw, 84px); margin-top: 22px; } } :where(.lde-main) .mstack { display: flex; flex-direction: column; gap: 32px; padding: 0 48px 120px; } :where(.lde-main) .mcard { position: sticky; top: calc(96px + var(--i) * 22px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 400px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 24px; background: linear-gradient(160deg, #181818 0%, #0E0E0E 100%); box-shadow: 0 -24px 60px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4); transform-origin: 50% 0; will-change: transform, filter; } :where(.lde-main) .mcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 70%, var(--sales-tint)), transparent); opacity: .6; } :where(.lde-main) .mc-text { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 44px; } :where(.lde-main) .mc-n { font-family: var(--mono); font-size: 13px; color: var(--sales-tint); } :where(.lde-main) .mc-n em { font-style: normal; color: var(--faint); } :where(.lde-main) .mc-main { display: flex; flex-direction: column; gap: 18px; } :where(.lde-main) .mc-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--blue); color: #fff; font-size: 22px; box-shadow: 0 12px 28px -12px var(--blue-glow); } :where(.lde-main) .mcard h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; color: #fff; } :where(.lde-main) .mcard dl { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); } :where(.lde-main) .mcard dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline; } :where(.lde-main) .mcard dt { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } :where(.lde-main) .mcard dd { font-size: 17px; line-height: 1.5; color: var(--text); } :where(.lde-main) .mcard dl > div:first-child dd { font-weight: 600; color: var(--sales-tint); } :where(.lde-main) .mc-viz { height: auto; min-height: 100%; border-bottom: 0; border-left: 1px solid var(--line); background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 75%), rgba(255, 255, 255, .02); } :where(.lde-main) .mcard .rr svg { width: 340px; height: 296px; } :where(.lde-main) .mcard .wt, :where(.lde-main) .mcard .pf { padding: 40px 48px; gap: 22px; } :where(.lde-main) .mcard .lb { padding: 48px 56px 40px; } @media (max-width: 900px) { :where(.lde-main) .mstack { gap: 20px; padding: 0 16px 88px; padding-left: 7.5%; padding-right: 7.5%;} :where(.lde-main) .mcard { top: calc(76px + var(--i) * 12px); grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 18px; } :where(.lde-main) .mc-text { gap: 18px; padding: 24px 22px; } :where(.lde-main) .mcard h3 { font-size: 26px; } :where(.lde-main) .mcard dl > div { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; } :where(.lde-main) .mcard dd { font-size: 15px; } :where(.lde-main) .mc-viz { min-height: 220px; height: 220px; border-left: 0; border-top: 1px solid var(--line); } :where(.lde-main) .mcard .rr svg { width: 230px; height: 200px; } :where(.lde-main) .mcard .wt, :where(.lde-main) .mcard .pf { padding: 24px 22px; } :where(.lde-main) .mcard .lb { padding: 28px 24px 22px; } } :where(.lde-main) .mcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 380px; } :where(.lde-main) .mc-text { gap: 28px; padding: 38px 44px 34px; } :where(.lde-main) .mc-top { display: flex; align-items: center; gap: 12px; } :where(.lde-main) .mc-ic { width: 40px; height: 40px; border-radius: 12px; font-size: 19px; } :where(.lde-main) .mc-n { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--sales-tint); } :where(.lde-main) .mc-n em { font-style: normal; color: var(--faint); } :where(.lde-main) .mc-main { gap: 0; } :where(.lde-main) .mcard h3 { font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 18px; } :where(.lde-main) .mc-by { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .03); } :where(.lde-main) .mc-by span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } :where(.lde-main) .mc-by b { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 30%, transparent); color: #fff; font-size: 13.5px; font-weight: 600; } :where(.lde-main) .mc-best { display: flex; flex-direction: column; gap: 8px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); } :where(.lde-main) .mc-best span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } :where(.lde-main) .mc-best p { max-width: 420px; font-size: 18px; line-height: 1.55; color: var(--text); } :where(.lde-main) .mc-viz { display: grid; place-items: center; padding: 36px 40px; min-height: 0; border-left: 1px solid var(--line); background: radial-gradient(60% 65% at 50% 50%, color-mix(in srgb, var(--blue) 28%, transparent), transparent 75%), rgba(255, 255, 255, .015); } :where(.lde-main) .mc-panel { width: 100%; max-width: 460px; overflow: hidden; border: 1px solid rgba(239, 246, 255, .18); border-radius: 16px; background: #fff; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7), 0 20px 50px -20px var(--blue-glow); } :where(.lde-main) .mc-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-alt); } :where(.lde-main) .mc-bar .win-dots i { width: 9px; height: 9px; } :where(.lde-main) .mc-bar-t { flex: 1; font-size: 12px; font-weight: 600; color: var(--ink); } :where(.lde-main) .mc-bar .live { font-size: 11px; padding: 2px 8px; } :where(.lde-main) .viz-in { position: relative; height: 240px; background: linear-gradient(180deg, #fff, var(--bg-alt)); } :where(.lde-main) .mcard .rr svg { width: 250px; height: 218px; } :where(.lde-main) .mcard .wt, :where(.lde-main) .mcard .pf { padding: 26px 28px; gap: 18px; } :where(.lde-main) .mcard .pf .hot { top: 14px; right: 16px; } :where(.lde-main) .mcard .lb { padding: 26px 34px 18px; gap: 14px; } :where(.lde-main) .mcard .lb .col { max-width: 46px; } :where(.lde-main) .mcard .nr svg { inset: 0; } @media (max-width: 900px) { :where(.lde-main) .mc-text { gap: 18px; padding: 24px 22px 20px; } :where(.lde-main) .mcard h3 { font-size: 28px; margin-bottom: 14px; } :where(.lde-main) .mc-best { margin-top: 18px; padding-top: 16px; } :where(.lde-main) .mc-best p { font-size: 16px; } :where(.lde-main) .mc-viz { padding: 18px; height: auto; min-height: 0; border-left: 0; border-top: 1px solid var(--line); } :where(.lde-main) .viz-in { height: 210px; } :where(.lde-main) .mcard .rr svg { width: 220px; height: 192px; } } :where(.lde-main) .mc-panel { max-width: 460px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } :where(.lde-main) .viz-in { height: 260px; background: transparent; } :where(.lde-main) .mc-panel { max-width: 460px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(180deg, #161616, #101010); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .8), 0 20px 60px -24px var(--blue-glow); } :where(.lde-main) .mc-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); } :where(.lde-main) .mc-bar .win-dots i { width: 9px; height: 9px; background: rgba(239, 246, 255, .16); } :where(.lde-main) .mc-bar-t { flex: 1; font-size: 12px; font-weight: 600; color: var(--sales-tint); } :where(.lde-main) .mc-bar .live { padding: 2px 8px; font-size: 11px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); } :where(.lde-main) .viz-in { height: 240px; background: radial-gradient(70% 80% at 50% 45%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 75%); } @media (min-width: 901px) { :where(.lde-main) .hero-inner { padding-top: 72px; } :where(.lde-main) .tour { margin-top: 64px; } } :where(.lde-main) .fq h3 { margin: 0; font: inherit; } :where(.lde-main) .tab .tab-h { display: block; } :where(.lde-main) .tour-fallback { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; height: 100%; padding: 24px 28px; list-style: none; overflow: auto; } :where(.lde-main) .tour-fallback li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } :where(.lde-main) .tour-fallback b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--ink); } :where(.lde-main) .tour-fallback p { font-size: 12.5px; line-height: 1.5; color: var(--muted); } @media (max-width: 600px) { :where(.lde-main) .tour-fallback { grid-template-columns: minmax(0, 1fr); } } :where(.lde-main) .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :where(.lde-main) .app-head { display: flex; align-items: center; gap: 22px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #fff; } :where(.lde-main) .app-logo { height: 19px; width: auto; flex-shrink: 0; } :where(.lde-main) .app-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-alt); font-size: 12px; font-weight: 500; color: var(--muted); } :where(.lde-main) .app-nav span { padding: 4px 10px; border-radius: 7px; white-space: nowrap; } :where(.lde-main) .app-nav span.on { background: #fff; color: var(--blue); font-weight: 600; box-shadow: var(--shadow-sm); } :where(.lde-main) .app-av { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--ink); } @media (min-width: 901px) { :where(.lde-main) .tour .app-head { height: 42px; } :where(.lde-main) .tour .app-logo { height: 17px; } } @media (max-width: 900px) { :where(.lde-main) .app-nav span:not(.on) { display: none; } :where(.lde-main) .app-head { gap: 12px; padding: 0 14px; } :where(.lde-main) .app-logo { height: 16px; } } :where(.lde-main) a, :where(.lde-main) button { -webkit-tap-highlight-color: transparent; } :where(.lde-main) button { touch-action: manipulation; } :where(.lde-main) .nav { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } @supports not (zoom: 1) { @media (min-width: 901px) { :where(.lde-main) .stages > .st { zoom: normal; width: 125%; height: calc(300px / .8); transform: scale(.8); transform-origin: 0 0; } } } @supports not (color: color-mix(in srgb, red 50%, blue)) { :where(.lde-main), :where(.lde-main) .light-ui { --line-strong: #CFD8EA; --blue-text: #0040DF; --green-ink: #187E3D; --green-wash: #E3F8EB; } :where(.lde-main) { --blue-deep: #0234AE; --blue-soft: #E6ECFC; --blue-wash: rgba(0, 64, 223, .07); --blue-glow: rgba(0, 64, 223, .28); } :where(.lde-main) .dark { --tint: rgba(0, 64, 223, .16); --faint: rgba(156, 163, 175, .65); --blue-text: #7C9BEE; --green-wash: rgba(34, 197, 94, .22); } } :where(.lde-main) .win-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (max-width: 600px) { :where(.lde-main) .hero-cta { width: 100%; max-width: 360px; } :where(.lde-main) .hero-cta .btn { flex: 1 1 100%; justify-content: center; } :where(.lde-main) .tour .win-title { font-size: 11px; } } @media (max-width: 900px) { :where(.lde-main) .mcard { grid-template-columns: minmax(0, 1fr); min-height: 0; } :where(.lde-main) .mc-viz { padding: 16px; border-left: 0; border-top: 1px solid var(--line); } :where(.lde-main) .mc-panel { max-width: 100%; } :where(.lde-main) .viz-in { height: 210px; } :where(.lde-main) .mc-by { flex-wrap: wrap; } } @media (max-width: 400px) { :where(.lde-main) .mc-text { padding: 20px 18px 18px; } :where(.lde-main) .mcard h3 { font-size: 24px; } :where(.lde-main) .mc-best p { font-size: 15px; } } @media (min-width: 901px) and (max-width: 1100px) { :where(.lde-main) .tour .win-body { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1200px) { :where(.lde-main) .tour { width: min(1680px, calc(100vw - 48px)); display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: stretch; } :where(.lde-main) .tour-tabs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px; align-self: start; border-radius: 18px; } :where(.lde-main) .tt { align-items: flex-start; padding: 14px 14px 18px; gap: 12px; } :where(.lde-main) .tt-ic { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; } :where(.lde-main) .tt-tx { gap: 4px; } :where(.lde-main) .tt-tx b { font-size: 15px; } :where(.lde-main) .tt-tx span { display: block; white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; line-height: 1.45; } :where(.lde-main) .tt-prog { left: 14px; right: 14px; bottom: 7px; } :where(.lde-main) .stages { height: 400px; } :where(.lde-main) .stages > .st { zoom: 1; width: auto; height: 100%; transform: none; } :where(.lde-main) .tour .win-body { grid-template-columns: 220px minmax(0, 1fr); } :where(.lde-main) .tour .win-bar { height: 40px; } :where(.lde-main) .tour .win-title { font-size: 12px; } :where(.lde-main) .tour .side { padding: 14px 10px; font-size: 13px; } :where(.lde-main) .tour .side a, :where(.lde-main) .tour .side .rec { padding: 8px 10px; } :where(.lde-main) .tour .side .grp { margin: 14px 10px 6px; } :where(.lde-main) .tour .log { height: 84px; padding: 12px 28px 10px; font-size: 12px; } :where(.lde-main) .tour .ask-wrap { padding: 0 28px 20px; } :where(.lde-main) .tour .ask { padding: 12px 14px; font-size: 13.5px; } } @media (min-width: 901px) and (max-width: 1199px) { :where(.lde-main) .tt-tx span { display: none; } :where(.lde-main) .tt { align-items: center; } } @media (min-width: 1200px) and (max-width: 1419px) { :where(.lde-main) .tour .side { display: none; } :where(.lde-main) .tour .win-body { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1200px) { :where(.lde-main) .tour-tabs { align-self: stretch; justify-content: stretch; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 8px 8px 0; } :where(.lde-main) .tt { flex: 1 1 0; align-items: center; min-height: 0; } :where(.lde-main) .tt:last-child { margin-bottom: 8px; } } @media (min-width: 1200px) { :where(.lde-main) .tour { width: min(1320px, calc(100vw - 120px)); grid-template-columns: 280px minmax(0, 1fr); gap: 18px; } } @media (min-width: 1200px) { :where(.lde-main) { --frame: min(1320px, calc(100vw - 120px)); } :where(.lde-main) .tour { width: var(--frame); } } @media (min-width: 901px) and (max-width: 1199px) { :where(.lde-main) .tour { width: calc(100% + 96px); margin-left: -48px; margin-right: -48px; } :where(.lde-main) .tour-tabs { margin-left: 12px; margin-right: 12px; } } @media (min-width: 1200px) { :where(.lde-main) .tt { overflow: visible; } :where(.lde-main) .tt.on::after { content: ""; position: absolute; z-index: 2; top: 50%; right: -8px; width: 14px; height: 14px; transform: translateY(-50%) rotate(45deg); background: #0A1A46; border-top: 1px solid color-mix(in srgb, var(--blue) 70%, #0A0A0A); border-right: 1px solid color-mix(in srgb, var(--blue) 70%, #0A0A0A); border-top-right-radius: 3px; box-shadow: 4px -4px 12px -6px var(--blue-glow); } } @supports not (color: color-mix(in srgb, red 50%, blue)) { @media (min-width: 1200px) { :where(.lde-main) .tt.on::after { border-color: #0335B0; } } } @media (min-width: 1200px) { :where(.lde-main) .tt.on::after { right: -10px; width: 18px; height: 18px; background: #0E1D46; border-top: 1px solid rgba(0, 64, 223, .75); border-right: 1px solid rgba(0, 64, 223, .75); border-top-right-radius: 4px; box-shadow: 6px -6px 16px -6px rgba(0, 64, 223, .45); } } @media (min-width: 1200px) { :where(.lde-main) .tour-tabs { overflow: visible; } :where(.lde-main) .tt { position: relative; } :where(.lde-main) .tt.on { z-index: 2; margin-right: -9px; background: linear-gradient(180deg, #102356, #0C1A40); } :where(.lde-main) .tt.on::after { right: -10px; background: #0E1E4B; } } :where(.lde-main) .fq .pm, :where(.lde-main) .fq.open .pm { transform: none; } :where(.lde-main) .fq .pm .pm-v { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease), opacity .25s; } :where(.lde-main) .fq.open .pm .pm-v { transform: scaleY(0); opacity: 0; } :where(.lde-main) .tt.on::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang, 0deg), transparent 0 58%, color-mix(in srgb, var(--blue) 80%, transparent) 70%, #7FA2FF 80%, var(--sales-tint) 86%, var(--green) 90%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px rgba(0, 64, 223, .9)) drop-shadow(0 0 2px rgba(239, 246, 255, .6)); animation: lde-spin 3s linear infinite; } :where(.lde-main) .tt.on { animation: lde-ttGlow 3s ease-in-out infinite; } @keyframes lde-ttGlow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(0, 64, 223, .55), 0 14px 34px -18px var(--blue-glow); } 50% { box-shadow: inset 0 0 0 1px rgba(0, 64, 223, .8), 0 0 24px -4px rgba(0, 64, 223, .55), 0 14px 34px -18px var(--blue-glow); } } @media (min-width: 1200px) { :where(.lde-main) .tt.on::before { inset: -1px; } :where(.lde-main) .tt.on::after { animation: lde-arrowGlow 3s ease-in-out infinite; } @keyframes lde-arrowGlow { 0%, 100% { border-color: rgba(0, 64, 223, .75); box-shadow: 6px -6px 16px -6px rgba(0, 64, 223, .45); } 50% { border-color: #7FA2FF; box-shadow: 4px -4px 18px -2px rgba(0, 64, 223, .9), 2px -2px 6px -1px rgba(239, 246, 255, .55); } } } :where(.lde-main) .fq .pm, :where(.lde-main) .fq.open .pm { width: 24px; height: 24px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); } :where(.lde-main) .fq .pm .i { font-size: 18px; stroke-width: 2; } :where(.lde-main) .fq.open .pm { color: var(--blue); } :where(.lde-main) .fq button:hover .pm { color: var(--blue); } :where(.lde-main) .fq .pm { transition: transform .5s var(--ease), color .3s ease; } :where(.lde-main) .fq.open .pm { transform: rotate(180deg); } :where(.lde-main) .fq .pm .pm-v { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease), opacity .3s ease; transform: rotate(0deg); opacity: 1; } :where(.lde-main) .fq.open .pm .pm-v { transform: rotate(90deg); opacity: 1; } @media (min-width: 1200px) { :where(.lde-main) .tt.on::after { right: -12px; top: 50%; width: 13px; height: 26px; transform: translateY(-50%); border: 0; border-radius: 0; box-shadow: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 26'%3E%3Cpath d='M0 0 L12 13 L0 26 Z' fill='%230E1E4B'/%3E%3Cpath d='M0.6 0.6 L11.6 13 L0.6 25.4' fill='none' stroke='%231446D6' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; filter: drop-shadow(3px 0 6px rgba(0, 64, 223, .45)); animation: lde-arrowGlow2 3s ease-in-out infinite; } @keyframes lde-arrowGlow2 { 0%, 100% { filter: drop-shadow(3px 0 6px rgba(0, 64, 223, .4)); } 50% { filter: drop-shadow(4px 0 10px rgba(0, 64, 223, .85)) drop-shadow(1px 0 2px rgba(127, 162, 255, .7)); } } } @media (min-width: 1200px) { :where(.lde-main) .tt.on::after { animation: lde-arrowIn .45s cubic-bezier(.2, .8, .2, 1) both, lde-arrowGlow2 3s ease-in-out .45s infinite; } @keyframes lde-arrowIn { from { opacity: 0; transform: translate(-8px, -50%); } to { opacity: 1; transform: translate(0, -50%); } } } :where(.lde-main) .tt-glow { display: none; } @media (min-width: 1200px) { :where(.lde-main) .tt.on::before { display: none; } :where(.lde-main) .tt-glow { display: block; position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; } :where(.lde-main) .tt-glow path { fill: none; stroke-linecap: round; stroke-linejoin: round; } :where(.lde-main) .tt-glow .tail { stroke: url(#ttg-tail); stroke: #3D6BFF; stroke-width: 1.6; stroke-dasharray: 26 74; animation: lde-ttComet 3.2s linear infinite; filter: drop-shadow(0 0 4px rgba(0, 64, 223, .95)); opacity: .9; } :where(.lde-main) .tt-glow .head { stroke: #EFF6FF; stroke-width: 2; stroke-dasharray: 5 95; animation: lde-ttCometHead 3.2s linear infinite; filter: drop-shadow(0 0 3px #7FA2FF) drop-shadow(0 0 7px rgba(0, 64, 223, .9)); } @keyframes lde-ttComet { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes lde-ttCometHead { from { stroke-dashoffset: 79; } to { stroke-dashoffset: -21; } } } @media (min-width: 1200px) { :where(.lde-main) .tt-glow .tail, :where(.lde-main) .tt-glow .head { display: none; } :where(.lde-main) .tt-glow .band { filter: drop-shadow(0 0 6px rgba(0, 64, 223, .9)) drop-shadow(0 0 2px rgba(239, 246, 255, .6)); } :where(.lde-main) .tt-glow .band path { fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: round; animation: lde-ttBand 3s linear infinite; } :where(.lde-main) .tt-glow .band .g1 { stroke: rgba(0, 64, 223, .45); stroke-dasharray: 12 88; animation-delay: 0s; } :where(.lde-main) .tt-glow .band .g2 { stroke: rgba(0, 64, 223, .95); stroke-dasharray: 10 90; animation-delay: -.36s; } :where(.lde-main) .tt-glow .band .g3 { stroke: #7FA2FF; stroke-dasharray: 6 94; animation-delay: -.66s; } :where(.lde-main) .tt-glow .band .g4 { stroke: #EFF6FF; stroke-dasharray: 4 96; animation-delay: -.84s; } :where(.lde-main) .tt-glow .band .g5 { stroke: #22C55E; stroke-dasharray: 3 97; animation-delay: -.96s; stroke-linecap: round; } @keyframes lde-ttBand { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } } :where(.lde-main) .tt-ring { display: none; } @media (min-width: 1200px) { :where(.lde-main) .tt-glow { display: none !important; } :where(.lde-main) .tt-ring { display: block; position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 0 6px rgba(0, 64, 223, .9)) drop-shadow(0 0 2px rgba(239, 246, 255, .6)); } :where(.lde-main) .tt-ring-in { width: 100%; height: 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: conic-gradient(from var(--ang, 0deg) at var(--cx, 50%) 50%, transparent 0 58%, color-mix(in srgb, var(--blue) 80%, transparent) 70%, #7FA2FF 80%, var(--sales-tint) 86%, var(--green) 90%, transparent 96%); animation: lde-spin 3s linear infinite; } }