/* Bundled type: Geist (variable 100-900) + Geist Mono (variable
   100-900) served from /fonts, OFL licence in fonts/OFL.txt. No external font requests. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
}

/* Approved teaser design: the reference <style> block, moved here
   unchanged so the strict CSP (no inline styles) still holds. */
body{margin:0;background:#0A0D12}
a{color:#B4A9FF}a:hover{color:#E2DEFF}
@keyframes olla-look{0%,18%{transform:translate(0,0)}24%,40%{transform:translate(-7px,-3px)}46%,62%{transform:translate(7px,-2px)}68%,84%{transform:translate(2px,6px)}90%,100%{transform:translate(0,0)}}
.olla-look{animation:olla-look 7s ease-in-out infinite}
@keyframes olla-wink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(0.1)}}
.olla-pupil{transform-box:fill-box;transform-origin:center;animation:olla-wink 4.5s infinite}
@keyframes olla-blink{50%{opacity:0}}
.olla-caret{animation:olla-blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion: reduce){.olla-look,.olla-pupil,.olla-caret{animation:none}}

/* Production wiring below: invisible states for the waitlist form
   (the reference shows a static placeholder instead). */
#form-status[data-state="ok"]{color:#8B7BFF}
#form-status[data-state="bad"]{color:#F08CA0}
#waitlist-submit:disabled{opacity:.6;cursor:wait}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #8B7BFF;outline-offset:2px}

/* Privacy notice page only (kept from the previous teaser). */
.skip{position:absolute;left:16px;top:-64px;background:#8B7BFF;color:#0E0B2B;padding:8px 16px;border-radius:10px;z-index:10;font-weight:700}
.skip:focus{top:16px}
.top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:16px 40px;border-bottom:1px solid #1C2430;background:#0A0D12}
.wordmark{margin:0;font-size:18px;font-weight:600}
.top-cta{margin:0}
.button-small{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:10px;background:#8B7BFF;color:#0E0B2B;font-size:14px;font-weight:700;text-decoration:none}
.bottom{max-width:1180px;margin:0 auto;padding:0 40px 40px;color:#8B95A5;font-size:14px}
.banner{border:1px solid #263142;background:#10151C;border-radius:10px;padding:14px 18px}
#notice{max-width:860px;margin:0 auto;padding:40px}
#notice h1{font-size:32px;margin:0 0 16px}
#notice h2{font-size:20px;margin:32px 0 8px}
#notice p,#notice li{color:#B4BDCA}

/* Converted from inline style attributes (CSP style-src has no
   'unsafe-inline'): one class per unique declaration set, values copied
   exactly. Generated mechanically; do not hand-edit values. */
.x-01{min-height: 100vh; background: #0A0D12; color: #E7EBF1; font-family: 'Geist', ui-sans-serif, system-ui, sans-serif}
.x-02{position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 40px; border-bottom: 1px solid #1C2430; background: #0A0D12}
.x-03{display: flex; align-items: center; gap: 10px; text-decoration: none; color: #E7EBF1}
.x-04{font-size: 18px; font-weight: 600; letter-spacing: -0.01em}
.x-05{display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 10px; background: #8B7BFF; color: #0E0B2B; font-size: 14px; font-weight: 700; text-decoration: none}
.x-06{position: relative; overflow: hidden; padding: 88px 40px 96px; border-bottom: 1px solid #1C2430; background: #0E0D22; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px}
.x-07{position: absolute; inset: 0; pointer-events: none}
.x-08{position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #3A3570; background: #17163A; font-size: 13px; color: #C9C1FF}
.x-09{width: 7px; height: 7px; border-radius: 999px; background: #8B7BFF}
.x-10{position: relative; max-width: 100%; height: auto}
.x-11{position: relative; margin: 0; max-width: 900px; font-size: 64px; line-height: 1.04; font-weight: 600; letter-spacing: -0.045em}
.x-12{color: #B4A9FF}
.x-13{position: relative; margin: 0; max-width: 640px; font-size: 18px; line-height: 1.6; color: #B9B3E8}
.x-14{position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px}
.x-15{display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 12px; background: #8B7BFF; color: #0E0B2B; font-size: 17px; font-weight: 700; text-decoration: none}
.x-16{position: relative; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #9C96CC}
.x-17{width: 2px; height: 15px; background: #8B7BFF}
.x-18{max-width: 1180px; margin: 0 auto; padding: 88px 40px; display: flex; flex-direction: column; gap: 36px}
.x-19{display: flex; flex-direction: column; gap: 10px; max-width: 720px}
.x-20{font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #B4A9FF}
.x-21{margin: 0; font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.035em}
.x-22{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px}
.x-23{display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 20px; border: 1px solid #2E2A5C; background: #12122A; min-height: 220px; box-sizing: border-box}
.x-24{font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; font-weight: 600; color: #8B7BFF}
.x-25{margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #F1EFFF}
.x-26{margin: 0; font-size: 15px; line-height: 1.6; color: #B9B3E8}
.x-27{max-width: 1180px; margin: 0 auto; padding: 0 40px 88px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start}
.x-28{flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; padding-top: 8px}
.x-29{margin: 0; font-size: 16px; line-height: 1.6; color: #8B95A5}
.x-30{list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #C9D3E0}
.x-31{display: flex; gap: 10px}
.x-32{color: #8B7BFF; font-weight: 700}
.x-33{flex: 1 1 520px; display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 20px; border: 1px solid #263142; background: #0D1117}
.x-34{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
.x-35{display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #B4BDCA}
.x-36{height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #263142; background: #10151C; color: #E7EBF1; font: inherit; font-size: 15px}
.x-37{height: 48px; padding: 0 12px; border-radius: 10px; border: 1px solid #263142; background: #10151C; color: #E7EBF1; font: inherit; font-size: 15px}
.x-38{margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px}
.x-39{font-size: 13px; color: #B4BDCA; margin-bottom: 8px}
.x-40{display: flex; gap: 8px}
.x-41{flex: 1 1 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #8B7BFF; background: #17163A; font-size: 15px; cursor: pointer}
.x-42{accent-color: #8B7BFF}
.x-43{flex: 1 1 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #263142; background: #10151C; font-size: 15px; cursor: pointer}
.x-44{display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #B4BDCA; cursor: pointer}
.x-45{width: 18px; height: 18px; margin-top: 2px; accent-color: #8B7BFF}
.x-46{display: flex; align-items: center; justify-content: center; min-height: 64px}
.x-47{margin: 0; font-size: 14px; color: #B4BDCA}
.x-48{height: 56px; border-radius: 12px; border: 0; background: #8B7BFF; color: #0E0B2B; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer}
.x-49{max-width: 860px; margin: 0 auto; padding: 0 40px 88px; display: flex; flex-direction: column; gap: 14px}
.x-50{margin: 0 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em}
.x-51{border-radius: 14px; border: 1px solid #1C2430; background: #10151C; padding: 0 20px}
.x-52{min-height: 56px; display: flex; align-items: center; font-size: 16px; font-weight: 600; cursor: pointer}
.x-53{margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #B4BDCA}
.x-54{border-top: 1px solid #1C2430; padding: 28px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: #7D8899}
.x-55{display: flex; gap: 20px}
.x-56{color: #8B95A5}

/* Mobile layout (max-width 720px): single column. Every declaration uses
   !important so this one identical block overrides both the generated
   classes here and the inline styles in the reference baseline
   (docs/design/landing/olla-teaser-reference.html), which carries the same
   block. Desktop is untouched: nothing here applies above 720px. */
@media (max-width:720px){
header{padding:12px 20px!important}
header a[href="#waitlist"]{height:40px!important}
#olla-hero{padding:56px 20px 64px!important}
#olla-hero svg[role="img"]{width:100%!important;max-width:300px!important}
#hero{font-size:40px!important;line-height:1.08!important}
section h2{font-size:30px!important}
section[aria-labelledby="powers"]{padding-left:20px!important;padding-right:20px!important}
section[aria-labelledby="powers"] div:has(>article){grid-template-columns:minmax(0,1fr)!important}
section[aria-labelledby="powers"] article{min-height:auto!important}
#waitlist{padding-left:20px!important;padding-right:20px!important}
#waitlist form{padding:20px!important}
#waitlist form>div:first-of-type{grid-template-columns:minmax(0,1fr)!important}
section[aria-labelledby="faq"]{padding-left:20px!important;padding-right:20px!important}
footer{flex-direction:column!important;align-items:flex-start!important;padding:28px 20px!important}
}