/* Lark landing page: a dawn sky drawn in characters, then a black instrument panel. */
.lp {
  --sky-top: #04050d;
  --sky-mid: #0b1230;
  --sky-low: #2a1d4a;
  --ink: #0a0b0b;
  --line: rgb(255 255 255 / .09);
  --mint: #ffb86b;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: "Inter Display", "Inter", "SF Pro Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #050505;
  color: #f4f4f5;
}
.lp main { max-width: none; padding: 0; margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-wrap { max-width: 1220px; margin: 0 auto; padding: 0 32px; }

/* Floating pill nav */
.lp-nav-wrap { position: fixed; top: 18px; left: 0; right: 0; z-index: 20; display: flex; justify-content: center; pointer-events: none; }
.lp-nav { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgb(12 12 13 / .55); border: 1px solid rgb(255 255 255 / .08); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 10px 40px rgb(0 0 0 / .25); transition: background .4s var(--ease); }
.lp-nav.scrolled { background: rgb(10 10 11 / .82); }
.lp-nav a { color: rgb(255 255 255 / .82); font-size: 13.5px; padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; letter-spacing: -.005em; }
.lp-nav a:hover { color: #fff; background: rgb(255 255 255 / .07); }
.lp-mark { display: grid; place-items: center; width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important; background: rgb(255 255 255 / .08); }
.lp-mark .dot { box-shadow: 0 0 14px rgb(255 255 255 / .9); }
.lp-nav-sep { width: 1px; height: 18px; background: rgb(255 255 255 / .14); margin: 0 6px; }
.lp-cta { position: relative; display: inline-block; background: #fff; color: #000 !important; font-weight: 500; font-size: 13.5px; padding: 9px 18px !important; border-radius: 999px; isolation: isolate; transition: transform .2s var(--ease), box-shadow .3s; }
.lp-cta::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; background: conic-gradient(from var(--spin, 0deg), #a78bfa, #93c5fd, #5eead4, #fda4af, #a78bfa); filter: blur(6px); opacity: .55; animation: spin 6s linear infinite; }
.lp-cta:hover { background: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 30px rgb(255 255 255 / .25); }
.lp-cta-big { font-size: 15px; padding: 13px 28px !important; }
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }
@media (max-width: 760px) { .lp-nav a:not(.lp-mark):not(.lp-cta):not(.lp-nav-quiet) { display: none; } .lp-nav-sep { display: none; } }

/* Hero: sky */
.lp-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: radial-gradient(520px 520px at 82% 6%, rgb(196 210 255 / .16), transparent 60%), radial-gradient(1300px 380px at 50% 104%, rgb(124 92 255 / .38), transparent 70%), radial-gradient(900px 260px at 22% 100%, rgb(45 212 191 / .14), transparent 70%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-low) 100%); color: #fff; }
.lp-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px 380px at 50% 40%, rgb(140 160 255 / .08), transparent 70%), linear-gradient(180deg, transparent 75%, rgb(5 5 5 / .95) 100%); }
.lp-hero-inner { position: relative; z-index: 2; text-align: center; padding: 140px 24px 220px; max-width: 980px; margin: 0 auto; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: rgb(255 255 255 / .92); margin: 0 0 26px; text-shadow: 0 1px 12px rgb(0 0 0 / .15); }
.lp-live { width: 7px; height: 7px; border-radius: 50%; background: #ffb86b; box-shadow: 0 0 0 4px rgb(255 184 107 / .25), 0 0 12px #ffb86b; animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 8px rgb(255 184 107 / 0), 0 0 12px #ffb86b; } }
.lp-hero h1, .lp-end h2 { font-family: var(--display); font-weight: 300; font-size: clamp(46px, 7.4vw, 96px); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 22px; text-shadow: 0 2px 40px rgb(0 0 0 / .12); }
.lp-lede { font-size: 17px; line-height: 1.6; color: rgb(255 255 255 / .9); max-width: 600px; margin: 0 auto 34px; text-shadow: 0 1px 20px rgb(0 0 0 / .18); }
.lp-ask { background: rgb(255 255 255 / .92) !important; display: flex; align-items: flex-end; gap: 10px; max-width: 640px; margin: 0 auto; padding: 10px 10px 10px 22px; border-radius: 28px; background: rgb(255 255 255 / .82); border: 1px solid rgb(255 255 255 / .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 80px -20px rgb(20 40 35 / .45); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.lp-ask:focus-within { transform: translateY(-2px); box-shadow: 0 36px 90px -20px rgb(20 40 35 / .55), 0 0 0 4px rgb(255 255 255 / .35); }
.lp-ask textarea { flex: 1; border: 0; background: transparent; color: #0a0b0b; font: inherit; font-size: 16px; line-height: 1.5; padding: 9px 0; min-height: 0; resize: none; outline: none; box-shadow: none; }
.lp-ask textarea::placeholder { color: #6b726f; }
.lp-send { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: #0a0b0b; color: #fff; font-size: 17px; cursor: pointer; transition: transform .2s var(--ease); }
.lp-send:hover { transform: scale(1.06); opacity: 1; color: #fff; }
.lp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.lp-chips button { background: rgb(255 255 255 / .22); color: #fff; border: 1px solid rgb(255 255 255 / .45); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 400; backdrop-filter: blur(8px); cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.lp-chips button:hover { background: rgb(255 255 255 / .38); transform: translateY(-1px); opacity: 1; color: #fff; }

/* The run line */
.lp-run { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 220px; z-index: 1; }
.lp-run-path { stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: draw 3.2s var(--ease) .6s forwards; filter: drop-shadow(0 0 6px rgb(167 139 250 / .9)) drop-shadow(0 0 14px rgb(94 234 212 / .35)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lp-stages { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 2; pointer-events: none; }
.lp-stage { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: rgb(255 255 255 / .7); opacity: 0; animation: rise .8s var(--ease) forwards; }
.lp-stage b { color: #fff; font-weight: 500; font-size: 12px; padding: 2px 7px; background: rgb(14 16 40 / .7); border: 1px solid rgb(167 139 250 / .35); border-radius: 4px; backdrop-filter: blur(4px); }
.lp-stage::after { content: ""; width: 9px; height: 9px; margin-top: 8px; transform: translateY(14px) rotate(45deg); background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); box-shadow: none; filter: drop-shadow(0 0 6px #c4b5fd) drop-shadow(0 0 12px #fff); animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .55; transform: translateY(14px) rotate(45deg) scale(.8); } }
.lp-stage:nth-child(1) { animation-delay: 1.2s; } .lp-stage:nth-child(2) { animation-delay: 1.9s; } .lp-stage:nth-child(3) { animation-delay: 2.6s; } .lp-stage:nth-child(4) { animation-delay: 3.3s; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -80%); } to { opacity: 1; transform: translate(-50%, -100%); } }
@media (max-width: 760px) { .lp-stage:nth-child(odd) { display: none; } }

/* Marquee */
.lp-marquee { overflow: hidden; border-block: 1px solid var(--line); background: #070707; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lp-marquee-track { display: flex; gap: 64px; width: max-content; padding: 26px 32px; animation: marquee 40s linear infinite; }
.lp-marquee-track span { font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: rgb(255 255 255 / .55); white-space: nowrap; transition: color .2s; }
.lp-marquee-track span:hover { color: #fff; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Dark sections with boxed mono tags and a faint grid */
.lp-dark { position: relative; padding: 130px 0 120px; border-bottom: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; background-position: center top; }
.lp-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1200px 600px at 50% 0%, transparent, #050505 75%); }
.lp-dark > * { position: relative; }
.lp-tag { position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; padding: 7px 12px; border: 1px solid rgb(255 255 255 / .2); border-top: 0; border-left: 0; background: #050505; color: #fff; z-index: 2; }
.lp-dark h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.04em; margin: 0 0 18px; }
.lp-sub { color: rgb(255 255 255 / .55); font-size: 16px; line-height: 1.6; max-width: 480px; margin: 0; }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.lp-split-wide { grid-template-columns: 1fr 1.15fr; align-items: start; }
@media (max-width: 900px) { .lp-split, .lp-split-wide { grid-template-columns: 1fr; } }
.lp-ascii { margin: 0; font-family: var(--mono); font-size: 7px; line-height: 7px; color: rgb(255 255 255 / .55); text-align: center; user-select: none; overflow: hidden; white-space: pre; mask-image: radial-gradient(closest-side, #000 70%, transparent); }

/* Instrument panels */
.lp-panels { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgb(255 255 255 / .1); border-radius: 4px; background: rgb(8 8 9 / .7); }
.lp-panel { position: relative; padding: 28px 26px 30px; border-right: 1px solid rgb(255 255 255 / .1); overflow: hidden; transition: background .4s var(--ease); }
.lp-panel:last-child { border-right: 0; }
.lp-panel:hover { background: rgb(255 255 255 / .025); }
.lp-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px 160px at 50% 30%, rgb(255 255 255 / .06), transparent 70%); opacity: 0; transition: opacity .5s; }
.lp-panel:hover::after { opacity: 1; }
.lp-panel svg, .lp-browser { display: block; width: 100%; height: 170px; margin-bottom: 14px; }
.lp-panel h3 { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -.02em; margin: 0 0 8px; }
.lp-panel p { color: rgb(255 255 255 / .5); font-size: 14px; line-height: 1.55; margin: 0; }
.lp-readout { font-family: var(--mono); font-size: 13px; color: #fff; margin-bottom: 18px; letter-spacing: .04em; }
.lp-readout small { color: rgb(255 255 255 / .4); font-size: 10.5px; letter-spacing: .14em; margin-left: 6px; }
.lp-svg-label { font-family: var(--mono); font-size: 10px; fill: rgb(255 255 255 / .6); letter-spacing: .08em; }
.lp-dial-arc { stroke-dasharray: 377; stroke-dashoffset: 377; filter: drop-shadow(0 0 5px rgb(255 255 255 / .7)); }
.lp-panels.in .lp-dial-arc { animation: dial 2.4s var(--ease) forwards; }
@keyframes dial { to { stroke-dashoffset: 120; } }
.lp-ticks line { stroke: rgb(255 255 255 / .35); }
.lp-orbit-sat { offset-path: path("M30,80 a120,42 0 1,0 240,0 a120,42 0 1,0 -240,0"); animation: orbit 7s linear infinite; filter: drop-shadow(0 0 6px #5eead4); }
@keyframes orbit { to { offset-distance: 100%; } }
@media (max-width: 900px) { .lp-panels { grid-template-columns: 1fr; } .lp-panel { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .1); } }

/* Mini browser */
.lp-browser { border: 1px solid rgb(255 255 255 / .16); border-radius: 8px; overflow: hidden; background: #0b0b0c; }
.lp-browser-bar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-bottom: 1px solid rgb(255 255 255 / .08); font-family: var(--mono); font-size: 10px; color: rgb(255 255 255 / .5); }
.lp-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #2a2a2e; }
.lp-browser-bar span { margin-left: 8px; }
.lp-browser-body { position: relative; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.lp-skel { height: 8px; border-radius: 3px; background: linear-gradient(90deg, #1a1a1d, #26262b, #1a1a1d); background-size: 200% 100%; animation: sheen 2s linear infinite; }
.lp-skel.w60 { width: 60%; height: 11px; } .lp-skel.w40 { width: 40%; }
.lp-skel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.lp-skel.box { height: 54px; border-radius: 5px; }
@keyframes sheen { to { background-position: -200% 0; } }
.lp-cursor { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgb(94 234 212 / .2); animation: cursor 6s var(--ease) infinite; }
@keyframes cursor { 0%, 100% { left: 20%; top: 30%; } 30% { left: 22%; top: 72%; } 55% { left: 52%; top: 74%; } 80% { left: 80%; top: 70%; } }

/* Facts row */
.lp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 28px; border-top: 1px solid rgb(255 255 255 / .1); }
.lp-facts div { padding: 24px 24px 0 0; display: flex; flex-direction: column; gap: 6px; }
.lp-facts b { font-weight: 500; font-size: 15px; }
.lp-facts span { color: rgb(255 255 255 / .5); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 900px) { .lp-facts { grid-template-columns: 1fr 1fr; } }

/* Steps + terminal */
.lp-steps { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .1); }
.lp-steps li { padding: 20px 0; border-bottom: 1px solid rgb(255 255 255 / .1); cursor: pointer; }
.lp-steps h3 { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.02em; margin: 0; color: rgb(255 255 255 / .4); transition: color .3s; }
.lp-steps p { color: rgb(255 255 255 / .55); font-size: 14.5px; line-height: 1.6; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.lp-steps li.active h3 { color: #fff; }
.lp-steps li.active p { max-height: 120px; opacity: 1; margin-top: 10px; }
.lp-steps li { position: relative; }
.lp-steps li.active::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; background: #fff; animation: progress 6s linear forwards; box-shadow: 0 0 8px #fff; }
@keyframes progress { from { width: 0; } to { width: 100%; } }
.lp-term { border: 1px solid rgb(255 255 255 / .14); border-radius: 10px; background: #08080a; overflow: hidden; box-shadow: 0 40px 100px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .02); }
.lp-term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgb(255 255 255 / .08); font-family: var(--mono); font-size: 11px; color: rgb(255 255 255 / .5); }
.lp-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #26262a; }
.lp-term-bar span { margin-left: 8px; flex: 1; }
.lp-term-badge { font-style: normal; font-size: 10px; letter-spacing: .12em; color: #4ade80; border: 1px solid rgb(74 222 128 / .35); border-radius: 999px; padding: 2px 8px; }
.lp-term pre { margin: 0; padding: 18px; height: 380px; overflow: hidden; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: rgb(255 255 255 / .62); white-space: pre-wrap; }
.lp-term .t-cmd { color: #c7d2fe; } .lp-term .t-ok { color: #4ade80; } .lp-term .t-say { color: #fff; } .lp-term .t-dim { color: rgb(255 255 255 / .3); }
.lp-term .caret { display: inline-block; width: 7px; height: 14px; background: #fff; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Pricing (classes kept for site.js, which can redraw the grid) */
.lp-prices { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; border: 1px solid rgb(255 255 255 / .1); border-radius: 4px; background: rgb(8 8 9 / .7); }
.lp-prices .price { padding: 30px 26px; border-right: 1px solid rgb(255 255 255 / .1); display: flex; flex-direction: column; gap: 18px; }
.lp-prices .price:last-child { border-right: 0; }
.lp-prices .price.featured { background: radial-gradient(400px 200px at 50% 0%, rgb(255 255 255 / .07), transparent 70%); }
.lp-prices h3 { font-family: var(--mono); font-weight: 400; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .55); margin: 0; }
.lp-prices .amount { font-family: var(--display); font-weight: 300; font-size: 48px; letter-spacing: -.04em; line-height: 1; }
.lp-prices .amount span { font-size: 15px; color: rgb(255 255 255 / .45); margin-left: 4px; letter-spacing: 0; }
.lp-prices .checks { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgb(255 255 255 / .6); }
.lp-prices .checks li::before { content: "—"; color: rgb(255 255 255 / .3); margin-right: 10px; }
.lp-prices .button { text-align: center; }
@media (max-width: 1000px) { .lp-prices { grid-template-columns: 1fr 1fr; } .lp-prices .price:nth-child(2) { border-right: 0; } }
@media (max-width: 600px) { .lp-prices { grid-template-columns: 1fr; } .lp-prices .price { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .1); } }

/* FAQ */
.lp-faq { max-width: 860px; }
.lp-faq details { border-bottom: 1px solid rgb(255 255 255 / .1); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 17px; letter-spacing: -.01em; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-family: var(--mono); color: rgb(255 255 255 / .5); transition: transform .3s var(--ease); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq p { color: rgb(255 255 255 / .55); line-height: 1.65; margin: 0 0 22px; max-width: 720px; }

/* Closing sky */
.lp-end { min-height: 70vh; }
.lp-end .lp-hero-inner { padding: 140px 24px; }
.lp-end { background: radial-gradient(700px 300px at 50% 60%, rgb(124 92 255 / .3), transparent 70%), linear-gradient(0deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-low) 100%); } .lp-end::after { background: linear-gradient(180deg, rgb(5 5 5 / .95) 0%, transparent 28%); }

/* Footer */
.lp-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px 32px; border-top: 1px solid var(--line); }
.lp-foot-mark { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .32em; font-weight: 600; }
.lp-foot nav { display: flex; gap: 22px; }
.lp-foot a { color: rgb(255 255 255 / .5); font-size: 13px; }
.lp-foot a:hover { color: #fff; }

/* Scroll reveal */
.lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.lp-reveal.in { opacity: 1; transform: none; }

/* Reduced motion (often on by default on phones): calm, not frozen. Sections fade in without
   rising, and nothing slides or loops across the screen. */
@media (prefers-reduced-motion: reduce) {
  .lp-reveal { transform: none; transition: opacity 1s var(--ease); }
  .lp-marquee-track { animation: none !important; }
}

/* Undo the dashboard's global nav styles */
.lp-nav { flex: 0 0 auto; gap: 2px; overflow: visible; }
.lp-nav a { text-transform: none; letter-spacing: -.005em; font-weight: 400; border-bottom: 0; }
.lp-nav a.lp-cta { font-weight: 500; }
@media (max-height: 760px) { .lp-hero-inner { padding-top: 110px; padding-bottom: 180px; } .lp-hero h1 { font-size: clamp(40px, 6.4vw, 80px); } }
@media (max-height: 760px) { .lp-run, .lp-stages { height: 150px; } .lp-stage span { display: none; } }

/* The Lark mark */
.logo { display: block; width: 24px; height: 24px; border-radius: 7px; }
.lp-mark { background: transparent !important; }
.lp-mark .logo { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 20px rgb(246 160 124 / .45); }
.lp-foot-mark .logo { width: 20px; height: 20px; border-radius: 6px; }

/* Night: a moon, and a composer that glows faintly violet */
.lp-hero::before { content: ""; position: absolute; top: 12%; right: 11%; width: 64px; height: 64px; border-radius: 50%; z-index: 1; background: radial-gradient(circle at 38% 36%, #fbfbff 0%, #dfe4f7 45%, #b9c1de 100%); box-shadow: 0 0 40px 8px rgb(200 212 255 / .35), 0 0 140px 40px rgb(140 160 255 / .15); -webkit-mask: radial-gradient(circle at 70% 30%, transparent 22px, #000 23px); mask: radial-gradient(circle at 70% 30%, transparent 22px, #000 23px); }
.lp-end::before { display: none; }
.lp-ask { box-shadow: 0 30px 90px -20px rgb(80 60 200 / .55), 0 0 0 1px rgb(255 255 255 / .6) !important; }
.lp-ask:focus-within { box-shadow: 0 36px 100px -20px rgb(110 80 255 / .65), 0 0 0 4px rgb(167 139 250 / .35) !important; }
.lp-eyebrow { color: rgb(220 226 255 / .85); }
.lp-chips button { background: rgb(255 255 255 / .06); border-color: rgb(196 210 255 / .25); }
.lp-chips button:hover { background: rgb(255 255 255 / .14); }
@media (max-width: 760px) { .lp-hero::before { width: 44px; height: 44px; top: 9%; right: 8%; } }


/* ============ Around the clock ============ */
.lp-grad { background: linear-gradient(90deg, #c4b5fd, #fda4af 45%, #ffb86b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-day { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .1); }
.lp-day li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / .08); opacity: .45; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.lp-day li.done { opacity: 1; }
.lp-day li.latest { transform: translateX(6px); }
.lp-day time { font-family: var(--mono); font-size: 13px; color: rgb(255 255 255 / .55); padding-top: 2px; font-variant-numeric: tabular-nums; }
.lp-day li.latest time { color: #ffb86b; }
.lp-day b { display: block; font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; }
.lp-day span { color: rgb(255 255 255 / .55); font-size: 14px; line-height: 1.5; }
.lp-dial24 { display: grid; place-items: center; }
.lp-dial24 svg { width: min(460px, 100%); height: auto; overflow: visible; }
.d24-ring { fill: none; stroke: rgb(255 255 255 / .08); stroke-width: 10; }
.d24-progress { fill: none; stroke: url(#dayarc); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 200px 200px; filter: drop-shadow(0 0 8px rgb(253 164 175 / .45)); }
.d24-tick { stroke: rgb(255 255 255 / .18); stroke-width: 1; }
.d24-tick.major { stroke: rgb(255 255 255 / .5); stroke-width: 1.5; }
.d24-num { font-family: var(--mono); font-size: 11px; fill: rgb(255 255 255 / .5); text-anchor: middle; letter-spacing: .06em; }
.d24-event { fill: #0a0b0f; stroke: rgb(255 255 255 / .35); stroke-width: 2; transition: fill .5s, stroke .5s, r .3s; }
.d24-event.done { fill: #ffb86b; stroke: #fff; filter: drop-shadow(0 0 8px rgb(255 184 107 / .8)); }
.d24-event.hover { r: 9; }
.d24-hand { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(255 255 255 / .7)); }
.d24-hub { fill: #fff; }
.d24-time { font-family: var(--display); font-weight: 200; font-size: 52px; fill: #fff; text-anchor: middle; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.d24-label { font-family: var(--mono); font-size: 10.5px; fill: rgb(255 255 255 / .45); text-anchor: middle; letter-spacing: .18em; }
.lp-take { margin-left: auto; font-style: normal; font-size: 9px; letter-spacing: .12em; padding: 2px 7px; border-radius: 999px; background: #fff; color: #000; }

/* The night/day switch */
.lp-theme { position: relative; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .05); color: #fff; display: grid; place-items: center; cursor: pointer; overflow: hidden; margin-right: 4px; }
.lp-theme:hover { background: rgb(255 255 255 / .12); opacity: 1; box-shadow: none !important; }
.lp-theme::after { display: none !important; }
.lp-theme svg { position: absolute; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease), opacity .4s; }
.lp-theme .i-moon { fill: currentColor; stroke: none; }
html[data-theme="night"] .lp-theme .i-moon, html:not([data-theme]) .lp-theme .i-moon { transform: translateY(26px) rotate(40deg); opacity: 0; }
html[data-theme="day"] .lp-theme .i-sun { transform: translateY(-26px) rotate(-90deg); opacity: 0; }

/* A soft cross-fade when switching */
html.theme-shift .lp, html.theme-shift .lp * { transition: background-color .8s var(--ease), color .8s var(--ease), border-color .8s var(--ease), fill .8s, stroke .8s, box-shadow .8s !important; }
html.theme-shift .lp-hero, html.theme-shift .lp-end { transition: background .8s var(--ease) !important; }

/* Dusk and dawn: the new sky sweeps in with a soft horizon while the old one dims or brightens. */
@keyframes lp-dusk-in { from { mask-position: 0 100%; -webkit-mask-position: 0 100%; } to { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes lp-dawn-in { from { mask-position: 0 0; -webkit-mask-position: 0 0; } to { mask-position: 0 100%; -webkit-mask-position: 0 100%; } }
@keyframes lp-dusk-out { to { filter: brightness(.55) saturate(1.25) hue-rotate(-12deg); } }
@keyframes lp-dawn-out { to { filter: brightness(1.35) saturate(.9); } }
html[data-shift]::view-transition-old(root), html[data-shift]::view-transition-new(root) { mix-blend-mode: normal; }
html[data-shift]::view-transition-new(root) { -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html[data-shift="dusk"]::view-transition-new(root) { -webkit-mask-image: linear-gradient(180deg, #000 33%, transparent 66%); mask-image: linear-gradient(180deg, #000 33%, transparent 66%); animation: lp-dusk-in 1.5s cubic-bezier(.65, 0, .35, 1) both; }
html[data-shift="dawn"]::view-transition-new(root) { -webkit-mask-image: linear-gradient(180deg, transparent 33%, #000 66%); mask-image: linear-gradient(180deg, transparent 33%, #000 66%); animation: lp-dawn-in 1.5s cubic-bezier(.65, 0, .35, 1) both; }
html[data-shift="dusk"]::view-transition-old(root) { animation: lp-dusk-out 1.5s ease-in both; }
html[data-shift="dawn"]::view-transition-old(root) { animation: lp-dawn-out 1.5s ease-in both; }

/* ============ Day ============ */
html[data-theme="day"] { background: #f6efe6; }
html[data-theme="day"] .lp {
  --sky-top: #7fb2e5;
  --sky-mid: #b9d7ef;
  --sky-low: #f6d7b8;
  --line: rgb(20 24 40 / .08);
  background: #f6efe6;
  color: #14151a;
}
html[data-theme="day"] .lp-hero { background: radial-gradient(560px 560px at 82% 8%, rgb(255 236 179 / .75), transparent 60%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%); }
html[data-theme="day"] .lp-hero::after { background: radial-gradient(800px 380px at 50% 40%, rgb(255 255 255 / .18), transparent 70%), linear-gradient(180deg, transparent 72%, #f6efe6 100%); }
/* The sun, where the moon was */
html[data-theme="day"] .lp-hero::before { background: radial-gradient(circle at 40% 38%, #fffbe8 0%, #ffe39a 45%, #ffbf5e 100%); box-shadow: 0 0 60px 18px rgb(255 214 120 / .55), 0 0 140px 50px rgb(255 214 120 / .25); }
html[data-theme="day"] .lp-hero h1, html[data-theme="day"] .lp-end h2 { color: #10131c; text-shadow: 0 2px 30px rgb(255 255 255 / .35); }
html[data-theme="day"] .lp-grad { background: linear-gradient(90deg, #4f46e5, #db2777 45%, #ea580c); -webkit-background-clip: text; background-clip: text; }
html[data-theme="day"] .lp-lede { color: rgb(16 19 28 / .78); text-shadow: none; }
html[data-theme="day"] .lp-eyebrow { color: rgb(16 19 28 / .7); text-shadow: none; }
html[data-theme="day"] .lp-ask { background: #fff !important; box-shadow: 0 30px 80px -24px rgb(120 80 40 / .35), 0 0 0 1px rgb(20 24 40 / .08) !important; }
html[data-theme="day"] .lp-chips button { background: rgb(255 255 255 / .55); color: #14151a; border-color: rgb(20 24 40 / .12); }
html[data-theme="day"] .lp-chips button:hover { background: #fff; color: #14151a; }
html[data-theme="day"] .lp-run-path { filter: drop-shadow(0 0 6px rgb(234 88 12 / .5)); }
html[data-theme="day"] #runfade stop { stop-color: #ea580c; }
html[data-theme="day"] .lp-stage { color: rgb(16 19 28 / .7); }
html[data-theme="day"] .lp-stage b { color: #14151a; background: rgb(255 255 255 / .75); border-color: rgb(234 88 12 / .3); }
html[data-theme="day"] .lp-stage::after { background: #ea580c; }
html[data-theme="day"] .lp-nav { background: rgb(255 255 255 / .6); border-color: rgb(20 24 40 / .08); }
html[data-theme="day"] .lp-nav.scrolled { background: rgb(255 255 255 / .85); }
html[data-theme="day"] .lp-nav a { color: rgb(16 19 28 / .75); }
html[data-theme="day"] .lp-nav a:hover { color: #000; background: rgb(20 24 40 / .06); }
html[data-theme="day"] .lp-nav-sep { background: rgb(20 24 40 / .14); }
html[data-theme="day"] .lp-cta { background: #14151a; color: #fff !important; }
html[data-theme="day"] .lp-cta:hover { background: #000 !important; box-shadow: 0 8px 30px rgb(20 24 40 / .25); }
html[data-theme="day"] .lp-theme { color: #14151a; border-color: rgb(20 24 40 / .12); background: rgb(255 255 255 / .6); }
html[data-theme="day"] .lp-marquee { background: #efe6da; }
html[data-theme="day"] .lp-marquee-track span { color: rgb(16 19 28 / .45); }
html[data-theme="day"] .lp-marquee-track span:hover { color: #000; }
html[data-theme="day"] .lp-dark { background-color: #f6efe6; }
html[data-theme="day"] .lp-dark::before { background: radial-gradient(1200px 600px at 50% 0%, transparent, #f6efe6 75%); }
html[data-theme="day"] .lp-tag { background: #f6efe6; color: #14151a; border-color: rgb(20 24 40 / .2); }
html[data-theme="day"] .lp-sub, html[data-theme="day"] .lp-panel p, html[data-theme="day"] .lp-facts span, html[data-theme="day"] .lp-steps p, html[data-theme="day"] .lp-faq p, html[data-theme="day"] .lp-day span { color: rgb(16 19 28 / .62); }
html[data-theme="day"] .lp-ascii { color: rgb(16 19 28 / .45); }
html[data-theme="day"] .lp-panels, html[data-theme="day"] .lp-prices { background: rgb(255 255 255 / .65); border-color: rgb(20 24 40 / .1); }
html[data-theme="day"] .lp-panel, html[data-theme="day"] .lp-prices .price { border-color: rgb(20 24 40 / .1); }
html[data-theme="day"] .lp-panel:hover { background: rgb(255 255 255 / .9); }
html[data-theme="day"] .lp-readout { color: #14151a; }
html[data-theme="day"] .lp-readout small, html[data-theme="day"] .lp-svg-label { color: rgb(16 19 28 / .45); fill: rgb(16 19 28 / .55); }
html[data-theme="day"] .lp-panel svg path, html[data-theme="day"] .lp-panel svg ellipse { stroke: rgb(16 19 28 / .55); }
html[data-theme="day"] .lp-panel svg line { stroke: rgb(16 19 28 / .25); }
html[data-theme="day"] .lp-dial-dot { fill: #ea580c; }
html[data-theme="day"] .lp-browser { background: #fff; border-color: rgb(20 24 40 / .14); }
html[data-theme="day"] .lp-browser-bar { color: rgb(16 19 28 / .55); border-color: rgb(20 24 40 / .08); }
html[data-theme="day"] .lp-browser-bar i { background: #e5ddd1; }
html[data-theme="day"] .lp-skel { background: linear-gradient(90deg, #eee6da, #f8f3ec, #eee6da); background-size: 200% 100%; }
html[data-theme="day"] .lp-take { background: #14151a; color: #fff; }
html[data-theme="day"] .lp-facts, html[data-theme="day"] .lp-steps, html[data-theme="day"] .lp-day { border-color: rgb(20 24 40 / .1); }
html[data-theme="day"] .lp-steps li, html[data-theme="day"] .lp-faq details, html[data-theme="day"] .lp-day li { border-color: rgb(20 24 40 / .1); }
html[data-theme="day"] .lp-steps h3 { color: rgb(16 19 28 / .4); }
html[data-theme="day"] .lp-steps li.active h3 { color: #14151a; }
html[data-theme="day"] .lp-steps li.active::before { background: #ea580c; box-shadow: 0 0 8px rgb(234 88 12 / .6); }
html[data-theme="day"] .lp-term { background: #14151a; }
html[data-theme="day"] .lp-prices h3 { color: rgb(16 19 28 / .55); }
html[data-theme="day"] .lp-prices .amount span, html[data-theme="day"] .lp-prices .checks { color: rgb(16 19 28 / .6); }
html[data-theme="day"] .lp-prices .checks li::before { color: rgb(16 19 28 / .3); }
html[data-theme="day"] .lp-prices .price.featured { background: radial-gradient(400px 200px at 50% 0%, rgb(255 214 120 / .35), transparent 70%); }
html[data-theme="day"] .lp-prices .button:not(.ghost) { background: #14151a; color: #fff; }
html[data-theme="day"] .lp-prices .button.ghost { color: #14151a; border-color: rgb(20 24 40 / .2); }
html[data-theme="day"] .lp-faq summary::after { color: rgb(16 19 28 / .5); }
html[data-theme="day"] .lp-day time { color: rgb(16 19 28 / .55); }
html[data-theme="day"] .lp-day li.latest time { color: #ea580c; }
html[data-theme="day"] .d24-ring { stroke: rgb(20 24 40 / .08); }
html[data-theme="day"] .d24-tick { stroke: rgb(20 24 40 / .18); }
html[data-theme="day"] .d24-tick.major { stroke: rgb(20 24 40 / .45); }
html[data-theme="day"] .d24-num, html[data-theme="day"] .d24-label { fill: rgb(16 19 28 / .5); }
html[data-theme="day"] .d24-time { fill: #14151a; }
html[data-theme="day"] .d24-hand { stroke: #14151a; filter: none; }
html[data-theme="day"] .d24-hub { fill: #14151a; }
html[data-theme="day"] .d24-event { fill: #f6efe6; stroke: rgb(20 24 40 / .3); }
html[data-theme="day"] .d24-event.done { fill: #ea580c; stroke: #fff; filter: drop-shadow(0 0 6px rgb(234 88 12 / .55)); }
html[data-theme="day"] .lp-end { background: radial-gradient(700px 300px at 50% 60%, rgb(255 214 120 / .5), transparent 70%), linear-gradient(0deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-low) 100%); }
html[data-theme="day"] .lp-end::after { background: linear-gradient(180deg, #f6efe6 0%, transparent 35%); }
html[data-theme="day"] .lp-foot { color: #14151a; }
html[data-theme="day"] .lp-foot a { color: rgb(16 19 28 / .55); }
html[data-theme="day"] .lp-foot a:hover { color: #000; }
html[data-theme="day"] .lp-faq summary { color: #14151a; }
html[data-theme="day"] .lp-hero::before { -webkit-mask: none; mask: none; width: 78px; height: 78px; top: 10%; animation: sun-glow 6s ease-in-out infinite; }
@keyframes sun-glow { 50% { box-shadow: 0 0 80px 26px rgb(255 214 120 / .6), 0 0 180px 70px rgb(255 214 120 / .25); } }

/* Words that follow the theme */
html:not([data-theme="day"]) .when-day, html[data-theme="day"] .when-night { display: none; }
@media (max-width: 600px) { .lp-foot { flex-direction: column; align-items: flex-start; } .lp-foot nav { flex-wrap: wrap; gap: 12px 18px; } .legal-head { padding: 14px 18px; } .legal-body { padding: 48px 20px 72px !important; } }