/* elmts.dev home: the landing page. Hero over a Unicorn Studio scene (falls back to the canvas glow),
   a live demo of picking on a Mac desktop, the keyboard, "Say it once", and pricing. Shared tokens,
   buttons, nav and footer are in site.css. */
:root { --r: 12px; --r-lg: 16px; --r-xl: 20px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
.lg { width: 18px; height: 18px; fill: currentColor; fill-rule: evenodd; flex: none; }
.chip { border: 0; }

/* hero background: the Unicorn Studio scene; the canvas glow shows until (or unless) it loads */
.hero > .usbg { position: absolute; left: 0; top: 0; width: 100%; height: 900px; z-index: 0; pointer-events: none; }
.hero > .usbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 70%, var(--bg)); }
.hero.us-on > #hero-canvas { display: none; }

/* section heading: Raycast's two-tone title */
.sh { text-align: center; display: grid; gap: 4px; justify-items: center; }
.sh h2 { margin: 0; font: 500 20px/1.3 var(--font); color: var(--ink); letter-spacing: .1px; }
.sh p { margin: 0; font: 500 20px/1.3 var(--font); color: var(--muted); }
.sh.left { text-align: left; justify-items: start; }
.eyebrow { font: 500 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.big-sh { text-align: center; display: grid; gap: 14px; justify-items: center; }
.big-sh h2 { margin: 0; font: 600 clamp(30px, 4vw, 44px)/1.05 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.big-sh p { margin: 0; color: var(--muted); font-size: 17px; max-width: 34ch; text-wrap: balance; }
section { position: relative; }
.pad { padding-block: clamp(96px, 14vw, 200px); }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: -64px; padding: clamp(220px, 30vw, 340px) 16px 120px; text-align: center; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 50% 42%, transparent 50%, var(--bg) 100%), linear-gradient(to bottom, transparent 75%, var(--bg)); }
.hero > *:not(canvas) { position: relative; z-index: 2; }
.hero h1 { margin: 0; max-width: 560px; font: 600 clamp(40px, 6vw, 64px)/1.1 var(--display); letter-spacing: -.02em; font-feature-settings: "ss08", "ss02", "liga" 0; text-shadow: 0 4px 24px rgba(0,0,0,.35); text-wrap: balance; }
.hero .lede { margin: 32px 0 0; max-width: 470px; font-size: 18px; color: var(--ink-2); text-shadow: 0 4px 4px rgba(0,0,0,.25); text-wrap: balance; }
.hero .cta { margin-top: clamp(80px, 12vw, 150px); display: grid; justify-items: center; }


/* ---------- demo: a Mac desktop. Claude Code in a terminal on the left, an app on the right; pick anything on screen ---------- */
.demo-wrap { margin-top: 48px; position: relative; }
.demo-wrap::before { content: ""; position: absolute; inset: -80px -60px 20%; background: radial-gradient(ellipse at 50% 30%, rgba(0,153,255,.12), transparent 60%); pointer-events: none; }
.screen { position: relative; border-radius: 22px; padding: 10px; background: linear-gradient(#26272C, #141518); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 120px -30px rgba(0,0,0,.9); }
.desk { position: relative; border-radius: 14px; overflow: hidden; height: 680px; background: #05070A; }
.desk .lux, .desk .lux *, .desk #icons, .desk #icons * { cursor: default; }
.wallpaper { position: absolute; left: 50%; top: 46%; width: 1500px; height: 1500px; transform: translate(-50%, -50%) rotate(-45deg); filter: blur(30px); opacity: .95; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 28%, rgba(0,140,255,.85) 28% 38%, transparent 38% 42%, rgba(70,180,255,.7) 42% 48%, transparent 48% 52%, rgba(0,110,230,.85) 52% 62%, transparent 62% 70%, rgba(120,200,255,.35) 70% 71%, transparent 71%);
  -webkit-mask-image: linear-gradient(transparent 22%, #000 38%, #000 62%, transparent 78%); mask-image: linear-gradient(transparent 22%, #000 38%, #000 62%, transparent 78%); }
.desk .menubar { position: relative; z-index: 3; height: 30px; display: flex; align-items: center; gap: 4px; padding: 0 10px; font-size: 13px; color: rgba(255,255,255,.9); background: rgba(0,0,0,.18); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.desk .menubar > span, .desk .menubar .r > span { padding: 2px 7px; border-radius: 5px; }
.desk .menubar b { font-weight: 600; }
.desk .menubar .r { margin-left: auto; display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.desk .menubar .el { display: grid; place-items: center; }
.desk .menubar .el i { display: grid; place-items: center; width: 22px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.22); }
.desk .menubar .el svg { width: 11px; height: 11px; fill: #fff; color: #fff; }
.mwin { position: absolute; z-index: 2; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 .5px rgba(0,0,0,.8), 0 30px 70px -20px rgba(0,0,0,.85); }
.mwin .tb { height: 36px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.mwin .tb .lights { display: flex; gap: 8px; }
.mwin .tb .lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.mwin .tb .lights i:nth-child(2) { background: #FEBC2E; } .mwin .tb .lights i:nth-child(3) { background: #28C840; }
.mwin .tb .title { margin: 0 auto; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.6); padding: 2px 6px; border-radius: 5px; }
/* terminal: Claude Code, monospace like a real terminal (its prompt's chips too) */
.termw { left: 3%; top: 58px; width: 41%; height: 520px; background: rgba(14,15,18,.82); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); }
.termw .tb { border-bottom: 1px solid rgba(255,255,255,.06); }
.termw .body { flex: 1; min-height: 0; padding: 14px 16px; font: 12.5px/1.65 var(--mono); color: rgba(255,255,255,.62); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.cc-banner { display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(217,119,87,.55); color: rgba(255,255,255,.85); align-self: flex-start; }
.cc-banner b { color: #E08B6D; font-weight: 500; }
.cc-banner small { color: rgba(255,255,255,.45); font-size: 11.5px; }
.cc-log { display: flex; flex-direction: column; gap: 6px; }
.cc-log .you { color: #fff; }
.cc-log .you::before { content: "> "; color: rgba(255,255,255,.4); }
.cc-log .ai::before { content: "⏺ "; color: #fff; }
.cc-log .ai { color: rgba(255,255,255,.75); }
.cc-log .ok { color: var(--ok); }
.cc-log .dim { color: rgba(255,255,255,.4); }
.cc-prompt { margin-top: auto; padding: 10px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #fff; min-height: 46px; }
.cc-prompt::before { content: ">"; color: rgba(255,255,255,.45); margin-right: 2px; }
.cc-prompt .caret { width: 7px; height: 15px; background: #fff; animation: blink 1s steps(1) infinite; }
.cc-prompt .ph { color: rgba(255,255,255,.35); }
.cc-hint { font-size: 11px; color: rgba(255,255,255,.35); display: flex; justify-content: space-between; }
/* the app on the right */
.appw { right: 3%; top: 92px; width: 52%; height: 470px; background: #FFFFFF; }
.appw .tb { background: #ECECEE; border-bottom: 1px solid #DCDCE0; gap: 10px; }
.appw .tb .title { color: #55565C; }
.appw .tabs { display: flex; gap: 4px; margin-left: 10px; }
.appw .tabs span { font-size: 12px; padding: 4px 12px; border-radius: 6px; color: #55565C; }
.appw .tabs span.on { background: #fff; color: #1D1D1F; box-shadow: 0 0 0 1px #DCDCE0; }
.appw .urlbar { margin: 0 auto 0 8px; flex: 1; max-width: 300px; height: 24px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #DCDCE0; font: 12px var(--font); color: #6B6B70; display: flex; align-items: center; padding: 0 10px; }

kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font: 500 12px var(--mono); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -1.5px 0 var(--line-2); }
@keyframes blink { 50% { opacity: 0; } }
.wave { display: flex; align-items: center; gap: 4px; height: 44px; }
.wave i { width: 4px; border-radius: 2px; background: var(--ink-2); animation: wv 1.1s ease-in-out infinite; }
@keyframes wv { 50% { transform: scaleY(.4); } }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px 0 5px; border-radius: 5px; background: #1C1D22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font: 11.5px var(--mono); color: var(--ink); white-space: nowrap; animation: chip-in .2s var(--spring); }
.chip svg { width: 11px; height: 11px; fill: currentColor; }
.chip .id { color: var(--muted); }
@keyframes chip-in { from { transform: scale(.85); opacity: 0; } }
/* the shipped pick hover (extension/picker.js), with its adaptive wash */
.sel { position: absolute; pointer-events: none; z-index: 5; opacity: 0; transition: left 140ms var(--spring), top 140ms var(--spring), width 140ms var(--spring), height 140ms var(--spring), opacity 120ms; }
.sel.on { opacity: 1; }
.sel .hair { position: absolute; inset: 1px; border-radius: 5px; box-shadow: 0 0 0 1.5px rgba(10,10,10,.55), 0 0 0 2.5px rgba(255,255,255,.6); background: rgba(10,10,10,.10); }
.sel.on-dark .hair { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 0 0 2.5px rgba(0,0,0,.6); background: rgba(255,255,255,.12); }
.sel .k { position: absolute; width: 12px; height: 12px; border: 2.5px solid #0A0A0A; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.sel.on-dark .k { border-color: #fff; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); }
.sel .k1 { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.sel .k2 { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.sel .k3 { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.sel .k4 { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.sel .lbl { position: absolute; left: -3px; top: -30px; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px; border-radius: 7px; background: #0A0A0A; color: #fff; font: 500 12px/24px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 4px 12px -2px rgba(0,0,0,.35); }
.sel .lbl svg { width: 13px; height: 13px; fill: currentColor; }
.sel .lbl .dim { opacity: .55; }
.sel .lbl .to { padding-left: 7px; border-left: 1px solid rgba(255,255,255,.2); opacity: .85; }
.sel.below .lbl { top: auto; bottom: -30px; }
.ptr { position: absolute; z-index: 7; width: 26px; height: 30px; overflow: visible; transform-origin: 20% 15%; pointer-events: none; transition: left .6s var(--ease), top .6s var(--ease); opacity: 0; }
.ptr.on { opacity: 1; }
.ptr.press { transform: scale(.88); transition: transform .12s, left .6s var(--ease), top .6s var(--ease); }
@media (max-width: 860px) { .desk { height: auto; padding-bottom: 90px; } .mwin { position: relative; left: auto; right: auto; top: auto; width: auto; margin: 12px; } .termw { height: 300px; } .appw { height: 420px; } }

/* ---------- keyboard (Raycast's: a full board at 20%, four feature keys lit in place) ---------- */
/* the closing call to action: the board cropped to the two rows of lit feature keys, the rest fading out */
.kb-sec { display: grid; grid-template-columns: 440px auto; gap: 85px; height: 400px; overflow: hidden; }
.kb-cta { padding-block: clamp(56px, 7vw, 104px) clamp(16px, 3vw, 40px); }
.kb-sec .kb { transform: translateY(-160px); }
.kb-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 32px; max-width: 320px; }
.kb-text .sh h2, .kb-text .sh p { font-size: 20px; }
.kboard { height: 100%; overflow: hidden; -webkit-mask-image: radial-gradient(95% 70% at 17.02% 47.84%, #D9D9D9 16.79%, rgba(217,217,217,0) 83.76%); mask-image: radial-gradient(95% 70% at 17.02% 47.84%, #D9D9D9 16.79%, rgba(217,217,217,0) 83.76%); }
.kb { display: flex; flex-direction: column; gap: 12px; padding-left: 24px; }
.kr { display: flex; flex-wrap: nowrap; gap: 12px; height: 110px; }
.key { --a: #121212; --b: #0D0D0D; width: 110px; height: 100%; flex-shrink: 0; display: grid; grid-template-rows: 1fr 1fr; padding: 14.5px 15px; border-radius: 11px; opacity: .2;
  font: 500 23.75px "SF Pro Text", var(--font); color: #fff; text-shadow: rgba(0,0,0,.1) 0 .5px .5px; user-select: none;
  background: radial-gradient(75% 75% at 50% 91.9%, var(--a) 0%, var(--b) 100%);
  box-shadow: rgba(0,0,0,.4) 0 1.5px .5px 2.5px, #000 0 0 .5px 1px, rgba(0,0,0,.25) 0 2px 1px 1px inset, rgba(255,255,255,.2) 0 1px 1px 1px inset;
  transition: opacity .4s cubic-bezier(.23,1,.32,1), box-shadow .2s, transform .2s; }
.key .alt { grid-row: 1; display: flex; align-items: flex-start; color: #D8D8D8; }
.key .pri { grid-row: 2; display: flex; align-items: flex-end; }
.key .c { justify-content: center; } .key .rt { justify-content: flex-end; }
.key .st { grid-row: 1 / span 2; justify-content: center; align-items: center; font-size: 32px; display: flex; }
.key.f .alt svg { width: 24px; height: 24px; color: #fff; }
.key.f .pri { display: block; font-size: 16px; line-height: 1.3; font-weight: 500; color: #9C9C9D; align-self: end; }
.key.f .pri strong { color: #fff; }
.kb-sec.in .key.f { opacity: 1; }
@media (max-width: 960px) { .kb-sec { grid-template-columns: minmax(0, 1fr); height: auto; gap: 24px; } .kboard { height: 400px; } .kb-text { max-width: none; } }

/* ---------- say it once (feature cards) ---------- */
.fgrid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fcard { position: relative; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; min-height: 300px; display: flex; flex-direction: column; }
.fcard.top { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 260px; }
.fcard .d { padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.fcard.top .d { justify-content: center; }
.fcard h5 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.fcard h5 svg { width: 16px; height: 16px; }
.fcard .d p { margin: 0; color: var(--muted); font-size: 14px; max-width: 40ch; }
.fcard .art { flex: 1; position: relative; display: grid; place-items: center; padding: 26px 26px 0; }
.mini-mod { position: relative; width: min(100%, 360px); border-radius: 14px; background: rgba(20,21,25,.85); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -12px rgba(0,0,0,.8); padding: 8px; }
.mini-mod .r { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 9px; font-size: 13px; }
.mini-mod .r.hl { background: rgba(255,255,255,.06); }
.mini-mod .r .th { height: 30px; border-radius: 6px; background: linear-gradient(135deg, #2A2B31, #1C1D22); }
.mini-mod .r small { display: block; font: 400 12px var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.mini-mod .r time { font: 400 12px var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.keys { display: flex; align-items: center; gap: 12px; padding-bottom: 26px; }
.keys .kc { width: 86px; height: 82px; border-radius: 12px; background: linear-gradient(180deg, #1C1D22, #131418); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.06), 0 8px 16px -6px rgba(0,0,0,.7); padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.keys .kc b { align-self: flex-start; font-weight: 500; font-size: 17px; }
.keys .kc span { font-size: 18px; color: var(--ink-2); }
.keys .plus { color: var(--faint); }
.keys .mouse { width: 56px; height: 82px; border-radius: 28px; background: linear-gradient(180deg, #1C1D22, #131418); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); position: relative; }
.keys .mouse::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 34px; background: rgba(255,255,255,.12); }
.keys .mouse::after { content: ""; position: absolute; left: 6px; top: 6px; width: 21px; height: 26px; border-radius: 20px 0 0 0; background: rgba(0,153,255,.35); box-shadow: 0 0 20px rgba(0,153,255,.5); animation: click 2.6s infinite; }
@keyframes click { 0%, 60%, 100% { opacity: .3; } 70%, 80% { opacity: 1; } }
@media (max-width: 760px) { .fgrid, .fcard.top { grid-template-columns: minmax(0, 1fr); } }

/* hero v2: Cluely's layout, the demo visible right under the button */
.hero { padding: clamp(130px, 15vw, 170px) 16px 0; }
.hero canvas { height: 900px; bottom: auto; }
.hero::after { bottom: auto; height: 900px; }
.hero h1 { max-width: 640px; }
.hero .lede { margin-top: 22px; }
.hero .cta { margin-top: 32px; }
.hero-demo { width: 100%; max-width: 1120px; margin-top: 56px; text-align: left; opacity: 0; transform: perspective(1400px) rotateX(8deg) translateY(30px); animation: demo-in 1s cubic-bezier(.22,1,.36,1) 1s forwards; }
@keyframes demo-in { to { opacity: 1; transform: none; } }

/* hero v3: Framer's layout, the copy left-aligned on the demo's left edge, the demo below at the same width */
.hero-copy { width: 100%; max-width: 1120px; display: grid; justify-items: start; text-align: left; }
.hero .hero-copy h1 { max-width: 744px; font-size: 54px; line-height: 1.05; letter-spacing: -.02em; }
@media (max-width: 760px) { .hero .hero-copy h1 { font-size: 40px; } }
.hero .hero-copy .lede { max-width: 683px; }
.hero .hero-copy .cta { justify-items: start; }

.desk { position: relative; border-radius: 14px; overflow: hidden; height: 620px; background: #05070A; pointer-events: none; user-select: none; }
.desk .wpimg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .5s; }
.desk[data-scene="desktop"] .wpimg { opacity: 1; }
.desk[data-scene="desktop"] .wallpaper { opacity: 0; }
.wallpaper { transition: opacity .5s; }
.scene { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; }
.scene.on { opacity: 1; pointer-events: auto; }
.scene .mwin { pointer-events: auto; }

/* desktop */
.icons { position: absolute; right: 2.5%; top: 52px; width: 50%; height: 520px; }
.icon { position: absolute; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: left .7s var(--ease), top .7s var(--ease), opacity .4s, transform .7s var(--ease); }
.icon .g { width: 54px; height: 44px; display: grid; place-items: center; }
.icon .fold { width: 54px; height: 40px; border-radius: 4px 4px 6px 6px; background: linear-gradient(#7BC3FF, #3A9BF0); position: relative; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.icon .fold::before { content: ""; position: absolute; left: 0; top: -6px; width: 22px; height: 9px; border-radius: 4px 4px 0 0; background: #5FB0F8; }
.icon .doc { width: 36px; height: 44px; border-radius: 3px; background: #fff; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,.35); font: 700 8px system-ui; color: #fff; display: grid; place-items: end center; padding-bottom: 6px; }
.icon .doc i { font-style: normal; padding: 1px 4px; border-radius: 2px; }
.icon .pic { width: 54px; height: 38px; border-radius: 3px; background: center / cover; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.icon .dmg { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(#EDEDF0, #C9C9CF); box-shadow: 0 4px 10px rgba(0,0,0,.35); display: grid; place-items: center; font: 700 10px system-ui; color: #555; }
.icon span { font: 500 11px/1.25 -apple-system, system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); padding: 1px 4px; border-radius: 4px; max-width: 84px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.icons.tidy .icon.mess { opacity: 0; transform: scale(.6); }
.icon.neat { opacity: 0; transform: scale(.6); }
.icons.tidy .icon.neat { opacity: 1; transform: none; }
.desk .ptr { z-index: 8; }
@media (max-width: 860px) { .icons { position: relative; right: auto; top: auto; width: auto; height: 420px; margin: 12px; } }

/* local dev site v2: a premium hospitality page */
.img-fjord { background-image: url(/assets/img/fjord.jpg); background-size: cover; background-position: center; }
.img-forest { background-image: url(/assets/img/forest.jpg); }
.img-coast { background-image: url(/assets/img/coast.jpg); }
.lux { flex: 1; overflow: hidden; background: #F4F1EC; color: #1B1A18; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; }
.lhero { position: relative; height: 290px; background-position: center 55%; padding: 16px 22px; display: flex; flex-direction: column; }
.lhero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,20,.45) 0%, rgba(8,14,20,.05) 40%, rgba(8,14,20,.55) 100%); }
.lhero > * { position: relative; }
.lnav { display: flex; align-items: center; gap: 18px; font-size: 11.5px; color: rgba(255,255,255,.85); letter-spacing: .02em; }
.lnav b { margin-right: auto; font-weight: 500; font-size: 12.5px; letter-spacing: .32em; color: #fff; }
.lnav .lbook { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter: blur(8px); color: #fff; }
.lhero h3 { margin: auto 0 14px; font: 400 34px/1.02 "Times New Roman", Georgia, serif; color: #fff; letter-spacing: -.02em; }
.lsearch { display: flex; align-items: center; gap: 0; align-self: flex-start; padding: 5px 5px 5px 4px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); color: #fff; font-size: 12px; }
.lsearch span { display: flex; flex-direction: column; padding: 2px 14px; border-right: 1px solid rgba(255,255,255,.25); line-height: 1.25; }
.lsearch span small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.lsearch b { margin-left: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #1B1A18; font-weight: 500; font-size: 12px; }
.lcabins { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 12px; padding: 14px 22px; }
.lcab .im { height: 92px; border-radius: 4px; background-size: cover; background-position: center; }
.lcab .tx { display: flex; justify-content: space-between; padding-top: 7px; font-size: 12px; }
.lcab .tx span { font: 400 14px "Times New Roman", Georgia, serif; }
.lcab .tx em { font-style: normal; color: #7A746C; font-size: 11px; }
.lnote { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 4px 12px; border-left: 1px solid #DDD6CC; }
.lnote small { font-size: 9.5px; letter-spacing: .18em; color: #7A746C; }
.lnote span { margin-top: 6px; font: italic 400 15px/1.2 "Times New Roman", Georgia, serif; }


/* the edits actually land */
.lux .lhero h3, .lux .lsearch span, .lux .lsearch { transition: font-size .6s var(--ease), padding .6s var(--ease), gap .6s var(--ease); }
.lux.done .lhero h3 { font-size: 44px; }
.lux.done .lsearch span { padding: 2px 10px; }

/* Claude Code, closer to the real terminal */
.mwin .tb .title { display: inline-flex; align-items: center; gap: 6px; }
.cc-ic { width: 12px; height: 12px; fill: #D97757; }
.cc-head { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(217,119,87,.55); align-self: flex-start; }
.cc-logo { width: 34px; height: 34px; fill: #D97757; flex: none; }
.cc-head b { color: #fff; font-weight: 600; }
.cc-head .v { color: rgba(255,255,255,.45); }
.cc-head small { display: block; color: rgba(255,255,255,.5); font-size: 11.5px; line-height: 1.5; }
.pbody { display: contents; }
.cc-prompt { line-height: 1.9; }
.cc-prompt .chip, .cc-log .chip { vertical-align: middle; margin: 0 1px; }
.cc-log .you { background: rgba(255,255,255,.05); padding: 4px 8px; border-radius: 4px; line-height: 1.9; }

/* the demo's glow box started 80px above the window and drew a hard edge across the hero; let it fade on all sides instead */
.demo-wrap::before { inset: -40px -60px 20% !important; -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
.hero-demo::before { display: none; }

/* hero type: Raycast's exact values (their CSS from the picks), our font */
.hero h1 { max-width: 540px; font-size: 64px; font-weight: 600; line-height: 110%; letter-spacing: normal; color: #fff; text-shadow: rgba(0,0,0,.15) 0 4px 4px; font-feature-settings: "ss08", "ss02", "liga" 0; }
.hero .lede { margin-top: 32px; max-width: 786px; font-size: 18px; font-weight: 400; line-height: normal; letter-spacing: .2px; color: #fff; text-shadow: rgba(0,0,0,.25) 0 4px 4px; text-wrap: balance; }
@media (max-width: 760px) { .hero h1 { font-size: 48px; max-width: 440px; } .hero .lede { font-size: 16px; } }


.desk .menubar .el { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.desk .menubar .el svg.elring { width: 12px; height: 12px; fill: none; transform: rotate(-90deg); overflow: visible; }
.elring circle { fill: none; stroke-width: 2.4; }
.elring .t { stroke: rgba(255,255,255,.22); }
.elring .p { stroke: #0099FF; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.elring.run .p { animation: el-ring var(--ringdur, 9s) linear forwards; }
@keyframes el-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .elring { display: none; } }




/* the demo on narrow screens: the app window on top, Claude Code under it */
@media (max-width: 860px) {
  .desk { height: 820px; padding-bottom: 0; }
  .desk .mwin, .desk .scene .mwin { position: absolute; left: 12px; right: 12px; width: auto; margin: 0; }
  .desk .scene .mwin { top: 44px; height: 420px; }
  .desk .termw { top: 476px; height: 332px; }
  .desk .icons { position: absolute; left: 12px; right: 12px; top: 44px; width: auto; height: 420px; margin: 0; }
  .desk .menubar { white-space: nowrap; overflow: hidden; }
}
@media (max-width: 560px) {
  .desk .menubar > span[data-pick="menu.item"]:nth-of-type(n+5), .desk .menubar [data-pick="status.battery"] { display: none; }
  .desk .lcabins { grid-template-columns: 1fr 1fr; } .desk .lnote { display: none; }
  .appw .urlbar { display: none; }
}

/* iOS Simulator: the phone floats on the desktop, its toolbar above it, as the real Simulator does.
   The app is Nordlys' companion (dark, warm), the same brand as the web scene. */
.simw { position: absolute; z-index: 2; right: 3%; top: 40px; width: 50%; display: flex; flex-direction: column; align-items: center; }
.simbar { display: flex; align-items: center; gap: 14px; width: 292px; height: 34px; padding: 0 12px; margin-bottom: 8px; border-radius: 10px; background: rgba(30,31,36,.72); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 30px -12px rgba(0,0,0,.7); font-size: 11px; color: rgba(255,255,255,.55); }
.simbar .lights { display: flex; gap: 7px; }
.simbar .lights i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.simbar .lights i:nth-child(2) { background: #FEBC2E; } .simbar .lights i:nth-child(3) { background: #28C840; }
.simbar b { display: block; font-weight: 600; font-size: 11.5px; color: rgba(255,255,255,.9); line-height: 1.15; }
.simbar > span:nth-child(2) { line-height: 1.15; }
.simbar .simic { margin-left: auto; display: flex; gap: 10px; }
.simbar .simic svg { width: 15px; height: 15px; color: rgba(255,255,255,.65); }
.phone { position: relative; width: 256px; height: 520px; transform: scale(1.3); transform-origin: 50% 0; padding: 8px; border-radius: 50px; background: linear-gradient(145deg, #3A3B40, #16171A 40%, #26272B); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 4px #0A0A0C, 0 40px 80px -24px rgba(0,0,0,.9), 0 0 0 .5px rgba(0,0,0,.9); }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2A2B30; }
.phone::before { left: -3px; top: 120px; height: 52px; } .phone::after { right: -3px; top: 150px; height: 74px; }
.pscreen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: #0D0E11; color: #F3EEE6; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; display: flex; flex-direction: column; }
.pstat { height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 24px 0 30px; font-size: 13px; }
.pstat b { font-weight: 600; letter-spacing: -.01em; }
.pstat .island { position: absolute; left: 50%; top: 10px; width: 86px; height: 25px; margin-left: -43px; border-radius: 13px; background: #000; }
.pind { display: flex; align-items: flex-end; gap: 1.5px; }
.pind i { width: 3px; border-radius: 1px; background: currentColor; }
.pind i:nth-child(1) { height: 4px; } .pind i:nth-child(2) { height: 6px; } .pind i:nth-child(3) { height: 8px; } .pind i:nth-child(4) { height: 10px; }
.pind svg { width: 23px; height: 11px; margin-left: 5px; }
.papp { flex: 1; min-height: 0; padding: 6px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.phead { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0; }
.phead small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,238,230,.5); }
.phead b { font: 400 25px/1.1 "Times New Roman", Georgia, serif; letter-spacing: -.01em; }
.pav { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 2px #0D0E11, 0 0 0 3px rgba(232,161,90,.6); }
.ptrip { position: relative; height: 158px; flex: none; margin: 0; border-radius: 20px; background-size: cover; background-position: center 60%; overflow: hidden; }
.ptrip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,12,.05) 30%, rgba(5,8,12,.78) 100%); }
.ptrip > * { position: relative; }
.ptag { position: absolute; left: 12px; top: 12px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.ptx { position: absolute; left: 14px; right: 14px; bottom: 13px; }
.ptx small { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ptx b { display: block; margin: 2px 0 3px; font: 400 21px/1.05 "Times New Roman", Georgia, serif; }
.ptx span { font-size: 11px; color: rgba(255,255,255,.75); }
.psec { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 0; font-size: 13px; }
.psec b { font-weight: 600; } .psec span { font-size: 11px; color: rgba(243,238,230,.45); }
.prow { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.prow .pic { width: 42px; height: 42px; border-radius: 10px; background-size: cover; background-position: center; }
.prow b { display: block; font-size: 12.5px; font-weight: 600; }
.prow small { display: block; font-size: 10.5px; color: rgba(243,238,230,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow em { font-style: normal; font-size: 11px; color: rgba(243,238,230,.75); font-variant-numeric: tabular-nums; }
.pbook { height: 44px; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; font-size: 13.5px; font-weight: 600; background: #2A2B30; color: rgba(243,238,230,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.pbook svg { width: 15px; height: 15px; }
.ptabs { height: 58px; flex: none; display: flex; justify-content: space-around; padding: 8px 10px 0; background: rgba(13,14,17,.9); border-top: 1px solid rgba(255,255,255,.06); font-size: 9.5px; color: rgba(243,238,230,.4); }
.ptabs span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ptabs span.on { color: #E8A15A; }
.ptabs svg { width: 20px; height: 20px; }
.phome { position: absolute; left: 50%; bottom: 7px; width: 104px; height: 4px; margin-left: -52px; border-radius: 2px; background: rgba(255,255,255,.75); }
/* the edit lands: the card goes edge to edge, the button takes the brand's amber */
.ptrip { transition: margin .7s var(--ease), border-radius .7s var(--ease), height .7s var(--ease); }
.pbook { transition: background .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease); }
.papp.done .ptrip { margin: 0 -16px; border-radius: 0; height: 174px; }
.papp.done .pbook { background: linear-gradient(180deg, #F0B06C, #E0954A); color: #1F1206; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -10px rgba(232,161,90,.7); }
@media (max-width: 860px) { .simw { position: relative; right: auto; top: auto; width: auto; margin: 12px auto; } }
/* Claude's replies stream: words resolve out of a blur, a caret while it runs */
.cc-log .stream .sw { display: inline; animation: sw-in .38s cubic-bezier(.23,1,.32,1) both; }
@keyframes sw-in { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
.cc-log .scaret { display: inline-block; width: 2px; height: 12px; margin-left: 1px; vertical-align: -1px; border-radius: 1px; background: rgba(255,255,255,.8); animation: sw-in .15s ease-out both; }

/* ---------- narration: the bento (a wide card over two), all about talking while you point ---------- */
    .say { max-width: 1236px; --say-card: linear-gradient(45deg, #0C0D0F 0%, #07080A 100.67%); --say-border: rgba(255,255,255,.06); --say-text: #9C9C9D; }
    .say .say-in { display: flex; flex-direction: column; gap: 48px; }
    .say .sh { max-width: 510px; margin: 0 auto; display: block; text-align: center; }
    .say .sh h2, .say .sh p { margin: 0; font: 500 20px/normal var(--font); letter-spacing: .2px; }
    .say .sh h2 { color: #fff; }
    .say .sh p { color: #6A6B6C; }

    .say .fgrid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; grid-template-areas: "top top" "left right"; }

    /* card chrome */
    .say .fcard { position: relative; min-height: 0; display: flex; flex-direction: column; border-radius: 12px; background: var(--say-card); border: 1px solid var(--say-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); overflow: hidden; isolation: isolate; }

    /* description: icon + h5 + p */
    .say .fcard .d { padding: 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; position: relative; z-index: 1; }
    .say .fcard h5 { margin: 0; display: inline-flex; align-items: center; gap: 16px; color: #fff; font: 400 18px/normal var(--font); letter-spacing: .2px; }
    .say .fcard h5 svg { width: 24px; height: 24px; flex: none; }
    .say .fcard .d p { margin: 0; max-width: 399px; color: var(--say-text); font: 500 14px/160% var(--font); letter-spacing: .2px; }

    .say .topw { grid-area: top; position: relative; z-index: 0; }
    /* top card */
    .say .fcard.top { height: 100%; display: grid; grid-auto-flow: column; grid-template-columns: none; align-items: stretch; padding: 0 16px 16px 0; }
    .say .fcard.top .d { max-width: 420px; grid-row: 1; }

    /* top showcase: the narration panel, hanging from the card's top edge */
    .say .show { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; padding: 0 16px; flex-grow: 1; }
    .say .say-mod { width: 459px; max-width: 100%; transform: translateY(-12px); padding: 32px 22px 17px; border: 1px solid var(--say-border); border-top: 0; border-radius: 0 0 12px 12px; background: linear-gradient(137deg, rgba(17,18,20,.75) 4.87%, rgba(12,13,15,.9) 75.88%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 7px 3px rgba(0,0,0,.03), 0 4px 4px rgba(0,0,0,.25); font: 500 16px/160% var(--font); letter-spacing: .2px; color: #fff; }
    .say .say-mod .lbl { color: #fff; margin-bottom: 19px; }
    .say .say-mod .msg { color: rgb(140,214,255); }
    .say .say-mod .chip { animation: none; vertical-align: 1px; }
    .say .say-mod .ctl { display: flex; justify-content: flex-end; margin-top: 29px; }
    .say .say-mod .btn { height: auto; min-height: 0; padding: 2px 12px; border-radius: 4px; line-height: 160%; font-size: 14px; }

    /* bottom cards */
    .say .fcard.left { grid-area: left; }
    .say .fcard.right { grid-area: right; display: grid; grid-template-rows: 1fr auto; grid-template-columns: 1fr; }
    .say .fcard .art { flex: 1; position: relative; display: block; padding: 0; }


    /* shortcut keys, Raycast keycap treatment */
    .say .fcard.right .art { display: flex; align-items: center; justify-content: center; min-height: 208px; padding-top: 24px; }

    @media (max-width: 760px) {
      .say .fgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "left" "right"; gap: 24px; }
      .say .fcard.top { grid-auto-flow: row; padding: 0; }
      .say .fcard.top .d { grid-row: 2; }
      .say .show { padding: 0 16px; min-height: 230px; }
    }
.nkey { --a: #141414; --b: #0D0D0D; width: 118px; height: 110px; display: grid; grid-template-rows: 1fr 1fr; padding: 14px 15px; border-radius: 11px; color: #fff;
  background: radial-gradient(75% 75% at 50% 91.9%, var(--a) 0%, var(--b) 100%);
  box-shadow: 0 1.5px .5px 2.5px rgba(0,0,0,.4), 0 0 .5px 1px #000, inset 0 2px 1px 1px rgba(0,0,0,.25), inset 0 1px 1px 1px rgba(255,255,255,.2);
  transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1), color .2s cubic-bezier(.23,1,.32,1); }
.nkey .a { font: 400 26px/1 var(--font); color: #D8D8D8; text-align: right; }
.nkey .b { align-self: end; font: 500 16px/1 var(--font); }
/* pressed, as Raycast's keycaps: down 2px, the lit rim thins and the ledge underneath goes */
.nkey.down { --a: #151515; transform: translateY(2px); box-shadow: 0 0 0 0 transparent, 0 0 .5px 1px #000, inset 0 2px 1px 1px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.15); }
.nar-hint { margin: 0; height: 18px; font: 500 12.5px/18px var(--font); color: #6A6B6C; }
/* the sentence comes in whole after the keys come up, and goes out before the next */
#nartext { transition: opacity .4s ease, filter .4s ease, transform .4s ease; }
#nartext.in { animation: nar-in .6s cubic-bezier(.23,1,.32,1) both; }
#nartext.out { opacity: 0; filter: blur(4px); transform: translateY(-4px); }
#nartext .nchip { animation: none; }
@keyframes nar-in { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: none; } }
.nchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin: 0 2px; padding: 0 9px 0 7px; border-radius: 6px; vertical-align: 2px; background: #1C1D22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font: 500 13px var(--font); font-variant-numeric: tabular-nums; color: #fff; animation: nar-chip .3s cubic-bezier(.34,1.56,.64,1) both; }
.nchip svg { width: 12px; height: 12px; fill: currentColor; color: #fff; }
@keyframes nar-chip { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
  .nkey { width: 96px; height: 90px; }
    /* narration in the bento */
    /* Two lines held from the start, chips no taller than a line: nothing moves as the words come in. */
    .say .say-mod .msg { display: block; color: #fff; height: 3.3em; font: 400 16px/1.65 var(--font); }
    .say .say-mod .msg .nchip { height: 22px; vertical-align: baseline; font-size: 12.5px; }
    .say .say-mod .ctl { justify-content: flex-start; margin-top: 12px; min-height: 30px; }
    /* "Listening…" sits where the sentence goes (they're never on screen together), so it takes no line of its own. */
    .say .say-mod { position: relative; }
    .say .say-mod .lbl { position: absolute; top: 32px; left: 22px; right: 22px; margin: 0; transition: opacity .18s ease, transform .18s ease, filter .18s ease; }
    .say .say-mod .lbl.swap { opacity: 0; transform: translateY(-4px); filter: blur(2px); }
    .say .nar-to { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; font: 500 12.5px var(--font); color: #fff; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s cubic-bezier(.23,1,.32,1); }
    .say .nar-to .cc { width: 14px; height: 14px; fill: #D97757; }
    .say.sent .nar-to { opacity: 1; transform: none; }
    .say .fcard.left .art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 170px; padding-top: 24px; }
    .say .nar-keys { display: flex; align-items: center; gap: 12px; }
    .say .nar-keys .plus { color: #4A4B4F; font: 500 22px var(--font); }
    .say .fcard.right .art { display: flex; align-items: center; justify-content: center; min-height: 170px; padding: 24px 28px 0; }
    .say .ccbox { width: 100%; max-width: 440px; padding: 14px 16px; border-radius: 10px; background: linear-gradient(137deg, #111214 4.87%, #0C0D0F 75.88%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font: 13px/1.9 var(--mono); color: rgba(255,255,255,.85); }
    .say .ccbox .pr { color: rgba(255,255,255,.4); margin-right: 6px; }
    .say .ccbox .nchip { height: 22px; font-size: 12px; animation: none; }
    .say .ccbox .hint { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.35); }
    .say .nkey { width: 104px; height: 104px; padding: 13px 14px; }
    .say .nkey .a { font-size: 22px; } .say .nkey .b { font-size: 15px; }
    @media (max-width: 760px) { .say .nkey { width: 90px; height: 90px; } }

/* ---------- FAQ: between pricing and the closing call to action ---------- */
.hfaq { max-width: 760px; padding-block: clamp(48px, 7vw, 96px) 0; display: flex; flex-direction: column; gap: 40px; }
.hfaq .sh { text-align: center; justify-items: center; }
.hfaq .sh h2, .hfaq .sh p { margin: 0; font: 500 20px/normal var(--font); letter-spacing: .2px; }
.hfaq .sh h2 { color: #fff; }
.hfaq .sh p { color: #6A6B6C; }

/* closing section: the glass mark (a Unicorn scene that tilts toward the cursor) in place of the keyboard */
.kboard.kbmark { position: relative; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.kbmark > .usmark { position: absolute; top: 0; left: 50%; width: 400px; height: 400px; max-width: 100%; transform: translateX(-50%); }

/* narration card: the glass bands from prod */
.say .glassbg { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 58%; pointer-events: none; opacity: .9; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.say .glassbg::before, .say .glassbg::after { content: ""; position: absolute; inset: -40% -10%; transform: skewX(38deg); }
.say .glassbg::before {
background:
linear-gradient(90deg, transparent 0 6%, rgba(0,200,255,.0) 6%, rgba(0,210,255,.85) 9%, rgba(0,153,255,.35) 13%, transparent 15%,
transparent 26%, rgba(0,120,255,.25) 27%, rgba(0,153,255,.9) 31%, rgba(0,90,230,.4) 35%, transparent 37%,
transparent 74%, rgba(0,153,255,.3) 75%, rgba(40,190,255,.85) 80%, rgba(0,80,220,.3) 85%, transparent 87%,
transparent 92%, rgba(0,120,255,.6) 95%, rgba(0,60,200,.2) 99%, transparent 100%),
linear-gradient(180deg, rgba(7,8,10,0) 0%, rgba(7,8,10,.0) 55%, rgba(7,8,10,.65) 80%, rgba(7,8,10,0) 100%);
background-blend-mode: normal;
filter: blur(1.5px) saturate(1.2);

}
.say .glassbg::after {
transform: skewX(38deg) translateX(-4%);
background: linear-gradient(90deg, transparent 15%, rgba(0,153,255,.22) 18%, transparent 24%, transparent 40%, rgba(10,60,180,.55) 46%, rgba(0,153,255,.15) 60%, transparent 70%),
radial-gradient(60% 50% at 70% 80%, rgba(0,102,255,.5), transparent 70%);
filter: blur(10px);
}
@media (max-width: 760px) { .say .glassbg { width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 85%); mask-image: linear-gradient(180deg, #000 40%, transparent 85%); } }
/* the narration panel: a thinner frosted glass, so the bands behind show through */
.say .say-mod { background: linear-gradient(137deg, rgba(17,18,20,.55) 4.87%, rgba(12,13,15,.72) 75.88%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* the narration sentence streams in: words resolve out of a blur, chips pop in, a caret runs ahead */
#nartext .sw { display: inline; animation: sw-in .38s cubic-bezier(.23,1,.32,1) both; }
#nartext .nchip.pop { animation: nchip-pop .25s cubic-bezier(.23,1,.32,1) both; }
@keyframes nchip-pop { from { opacity: 0; transform: scale(.85); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
#nartext .scaret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; border-radius: 1px; background: rgba(255,255,255,.85); animation: sw-in .15s ease-out both; }

/* demo desktop wallpaper: blue silk, toned down a little */
.wallpaper { left: 0; top: 0; width: 100%; height: 100%; transform: none; filter: saturate(.65) brightness(.85); opacity: 1; -webkit-mask-image: none; mask-image: none;
  background: url(/assets/img/silk.jpg) center / cover no-repeat; }
/* narration bento, bottom right: one chip opened up to show what it carries */
.say .chipx { width: 100%; max-width: 420px; display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.say .chipx .cx-top { display: flex; align-items: center; gap: 10px; }
.say .chipx .cx-el { font: 500 13px var(--font); color: #fff; }
.say .chipx .cx-dim { margin-left: auto; font: 12.5px var(--font); font-variant-numeric: tabular-nums; color: rgba(255,255,255,.4); }
.say .chipx .cx-rows { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); font: 12.5px/1.4 var(--font); font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); }
.say .chipx .cx-rows code { font-size: .93em; }
.say .chipx .cx-rows span { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.say .chipx em { flex: none; width: 52px; font-style: normal; color: rgba(255,255,255,.4); }
.say .chipx .sw { flex: none; width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
/* narration bento, bottom left: live agent turns, one after another, to show how quick each round trip is (Raycast's AI card) */
.say .art.live { padding: 18px 18px 0; align-items: stretch; }
.say .lv { position: relative; width: 100%; height: 100%; overflow: hidden; padding: 12px 12px 0; border-radius: 15px; background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); }
.say .lv-feed { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.say .lv-msg { display: flex; justify-content: flex-end; }
.say .lv-bubble { max-width: 82%; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.say .lv-bubble { display: flex; flex-wrap: wrap; align-items: center; column-gap: .32em; }
.say .lv-bubble .nchip { height: 21px; margin: 0; padding: 0 7px 0 6px; gap: 4px; border-radius: 6px; font-size: 12px; vertical-align: middle; animation: none; transform: none; }
.say .lv-bubble .nchip svg { width: 10px; height: 10px; }
.say .lv-tool { display: flex; align-items: center; gap: 8px; padding: 0 8px; color: rgba(255,255,255,.4); font-size: 13.5px; }
.say .lv-tool .g { flex: none; width: 14px; height: 14px; display: grid; place-items: center; }
.say .lv-tool .g svg { width: 14px; height: 14px; }
.say .lv-tool .spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.7); animation: lv-spin .7s linear infinite; }
@keyframes lv-spin { to { transform: rotate(360deg); } }
.say .lv-tool b { font-weight: 400; color: rgba(255,255,255,.7); }
.say .lv-tool .t { height: 16px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; }
.say .lv-tool.done .t { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.say .lv-reply { padding: 0 8px; color: rgba(255,255,255,.75); }
.say .lv-in { animation: sw-in .38s cubic-bezier(.23,1,.32,1) both; }
.say .nar-to .cc.cx { fill: #fff; color: #fff; width: 13px; height: 13px; }

/* section headings, Framer-style: left-aligned on each section's content edge */
.sh, .say .sh { text-align: left; justify-items: start; }
.say .sh { max-width: none; margin: 0; }
.sh h2, .sh p { font: 500 20px/1.3 var(--font); letter-spacing: .2px; }

/* narration panel: a cursor clicks each chip as it's mentioned, a live waveform beside it while talking */
.say .say-mod { position: relative; }
.nar-ptr { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: 6px; pointer-events: none; opacity: 0; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .3s; }
.nar-ptr.on { opacity: 1; }
.nar-ptr svg { width: 15px; height: 18px; fill: #0B0C0E; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transform-origin: 20% 15%; }
.nar-ptr.press svg { animation: nar-press .22s ease; }
@keyframes nar-press { 50% { transform: scale(.82); } }
.nar-wave { display: flex; align-items: center; gap: 2px; height: 18px; margin-top: 10px; padding: 0 6px; border-radius: 999px; background: rgba(12,13,16,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.nar-wave i { width: 2px; height: 4px; border-radius: 2px; background: #fff; animation: nar-wv .9s ease-in-out infinite; }
.nar-wave i:nth-child(2) { animation-delay: -.15s; } .nar-wave i:nth-child(3) { animation-delay: -.45s; } .nar-wave i:nth-child(4) { animation-delay: -.3s; } .nar-wave i:nth-child(5) { animation-delay: -.6s; }
@keyframes nar-wv { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .nar-ptr { display: none; } }
.nar-ptr .nar-wave { transition: opacity .3s, transform .3s; } .nar-ptr.quiet .nar-wave { opacity: 0; transform: scale(.8); }
/* the chip card's panel matches the live-turns panel beside it: same frame, fade and chip size */
.say .chipx { max-width: none; height: 100%; align-content: start; padding: 14px 16px; border-radius: 15px; background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); }
.say .chipx .nchip { height: 21px; margin: 0; padding: 0 7px 0 6px; gap: 4px; border-radius: 6px; font-size: 12px; animation: none; }
.say .chipx .nchip svg { width: 10px; height: 10px; }
.say .chipx .cx-rows { font-size: 13px; gap: 8px; }
.say .cx-body { display: grid; gap: 10px; transition: opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1), filter .22s ease; }
.say .cx-body.out { opacity: 0; transform: translateY(-6px); filter: blur(3px); }

/* Two bento sections: the iterate pair, then narration on its own, clicking a little page of its own */
#say .fgrid { grid-template-areas: "left right"; }
#nar .fgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top"; }
#nar .show { flex-direction: column; align-items: center; gap: 22px; padding-bottom: 8px; }
#nar .say-mod, #nar .nar-ui { width: 459px; max-width: 100%; }
.nar-ui { position: relative; z-index: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #121316, #0C0D0F); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.35); }
.nu-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.nu-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.14); }
.nu-bar span { margin-left: 10px; font: 12px var(--font); color: rgba(255,255,255,.35); }
.nu-body { display: grid; justify-items: start; gap: 10px; padding: 36px 20px 22px; }
.nu-pills { position: relative; display: flex; gap: 6px; margin-bottom: 4px; }
.nu-pills span { padding: 3px 10px; border-radius: 999px; font: 500 12px var(--font); color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.nu-pills span.on { color: #fff; background: rgba(255,255,255,.12); }
.nu-h { font: 500 17px/1.3 var(--font); color: #fff; letter-spacing: .1px; }
.nu-p { width: 78%; height: 7px; border-radius: 4px; background: rgba(255,255,255,.07); }
.nu-p.s { width: 52%; }
.nu-btn { position: relative; margin-top: 6px; padding: 7px 14px; font: 500 13px var(--font); }
/* the picker's highlight, as element draws it: an outline and the chip number */
.nar-ui [data-n]::after { content: "#" attr(data-n); position: absolute; left: -4px; top: -24px; padding: 1px 6px; border-radius: 4px; font: 500 11px var(--font); font-variant-numeric: tabular-nums; color: #0B0C0E; background: rgb(140,214,255); opacity: 0; transform: translateY(3px); transition: opacity .2s, transform .2s; pointer-events: none; }
.nar-ui [data-n]::before { content: ""; position: absolute; inset: -4px; border-radius: 7px; box-shadow: 0 0 0 1.5px rgb(140,214,255); opacity: 0; transition: opacity .2s; pointer-events: none; }
.nar-ui [data-n].hl::before, .nar-ui [data-n].hl::after { opacity: 1; transform: none; }
.nar-ui .nu-btn.hl::before { border-radius: inherit; }
/* the live turns: a capped, scrollable log whose newest lines run into a fade at the bottom */
.say .fcard.left .art, .say .fcard.right .art { height: 380px; flex: none; min-height: 0; }
#say .fcard.left .art.live, #say .fcard.right .art.live { padding: 32px 28px 0; }
.say .lv { flex: 1 1 0; min-height: 0; height: auto; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0; -webkit-mask-image: linear-gradient(#000 50%, transparent 100%); mask-image: linear-gradient(#000 50%, transparent 100%); }
.say .lv::-webkit-scrollbar { display: none; }
.say .lv-feed { position: static; padding: 12px 12px 40px; transition: none; }

/* a little accent inside the live turns: the done check, the timing, the spinner */
#say .fcard.acc .lv-tool .g svg, #say .fcard.acc .lv-tool .g svg path { stroke: #5B9BFF; }
#say .fcard.acc .lv-tool .spin { border-top-color: #5B9BFF; }
/* Codex in its own colours: lavender at the top to deep blue, as its app icon */
.say .nar-to .cc.cx { fill: url(#cdx-g); color: #6A9FFF; width: 14px; height: 14px; }
/* a little less room between the two bento sections than between other sections */
#say { padding-bottom: 160px; }
#nar { padding-top: 160px; }

/* the done check and the time in glass: the check on a small glassy tile, the time on a glassy tag with a lit top edge */
#say .fcard.acc .lv-tool .t { font-variant-numeric: tabular-nums; }
#say .fcard.acc .lv-tool.done .g { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(180deg, rgba(90,160,255,.35), rgba(30,90,255,.15)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(120,180,255,.35); }
#say .fcard.acc .lv-tool.done .g svg { width: 11px; height: 11px; }
#say .fcard.acc .lv-tool.done .g svg path { stroke: #CFE4FF; stroke-width: 2.2; }
#say .fcard.acc .lv-tool.done .t { height: 18px; line-height: 18px; padding: 0 7px; border-radius: 5px; background: linear-gradient(180deg, rgba(90,160,255,.3), rgba(30,90,255,.12)); color: #E3EEFF; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(120,180,255,.3); }
/* the narration demo's button in the same glass as the time tag: neutral glass before, green glass once Codex makes it green */
.nu-btn { color: #fff; border-radius: 6px; background-color: rgba(255,255,255,.08); background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.18); transition: background-color .5s ease, border-radius .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, color .5s ease; }
.nu-btn.applied { color: #E8FFF3; border-radius: 999px; background-color: rgba(40,200,120,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(110,240,180,.5); }
/* hero copy a touch smaller */
.hero .hero-copy h1 { font-size: 46px; max-width: 640px; }
.hero .hero-copy .lede { font-size: 16px; max-width: 600px; margin-top: 26px; }
@media (max-width: 760px) { .hero .hero-copy h1 { font-size: 36px; } .hero .hero-copy .lede { font-size: 15px; } }
/* the demo browser's toolbar: dark and see-through like Raycast's window, the wallpaper tinting it, no blur */
.appw { background: transparent; }
.appw .tb { background: rgba(14,15,18,.62); border-bottom: 1px solid rgba(255,255,255,.08); }
.appw .tabs span { color: rgba(255,255,255,.6); }
.appw .tabs span.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.appw .urlbar { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
/* the narration demo's button can be clicked: it plays the narration again */
.nar-ui .nu-btn { cursor: pointer; pointer-events: auto; }
.nar-ui .nu-btn:hover { background-color: rgba(255,255,255,.14); }
.nar-ui .nu-btn.applied:hover { background-color: rgba(40,200,120,.48); }
/* the cabin strip matches the toolbar: dark and see-through, no blur */
.appw .lux { background: transparent; display: flex; flex-direction: column; }
.appw .lcabins { flex: 1; background: rgba(14,15,18,.62); color: #fff; }
.appw .lcab .tx em, .appw .lnote small { color: rgba(255,255,255,.5); }
.appw .lnote { border-left-color: rgba(255,255,255,.12); }
/* trying it on the phone too: its screen dark and see-through, no blur (the bezel stays solid) */
.pscreen { background: rgba(13,14,17,.62); }
/* the bezel was a full background behind the screen, so a see-through screen only showed the bezel.
   Draw the bezel as rings instead, leaving the screen area open to the wallpaper */
.phone { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 4px #0A0A0C, inset 0 0 0 8px #24252A, 0 40px 80px -24px rgba(0,0,0,.9), 0 0 0 .5px rgba(0,0,0,.9); }
.ptabs { background: rgba(13,14,17,.5); }
.say .chipx em { width: 66px; }