@font-face{font-family:Outfit;src:url('assets/fonts/outfit-latin.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/instrument-serif-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/instrument-serif-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
/* Taste Skill brand output; palette supplied by the user. */
:root{
 --p-bg:#080b0d;--p-surface:#121719;--p-ink:#ffffff;--p-muted:#b7bdbb;
 --p-accent:#c7ff3e;--p-accent-ink:#080b0d;--p-action:#c7ff3e;--p-action-ink:#080b0d;
 --p-inv-bg:#ffffff;--p-inv-surface:#ebebeb;--p-inv-ink:#080b0d;--p-inv-muted:#595b5d;
 --p-inv-accent:#080b0d;--p-inv-accent-ink:#ffffff;--p-inv-action:#080b0d;--p-inv-action-ink:#ffffff;
 --font-display:Outfit,system-ui,sans-serif;--font-text:Outfit,system-ui,sans-serif;
 --font-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
 --display-weight:400;--display-tracking:-.03em;--display-tracking-xl:-.04em;
 --nav:76px;--hgap:32px;--hpadb:32px;--padt:112px;--padb:64px;
}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--p-bg);color:#fff;font-family:var(--font-text)}
[hidden]{display:none!important}img{display:block}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}.skip{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;top:12px;left:12px;clip-path:none;width:auto;height:auto;padding:12px 20px;z-index:100;background:#c7ff3e;color:#080b0d;border-radius:10px}
:where(a,button):focus-visible{outline:2px solid #c7ff3e;outline-offset:5px}
.btn{height:44px;min-height:44px;font:400 15px/1 var(--font-text);padding-inline:24px;border-radius:999px}
.btn--primary{color:#080b0d;background:#c7ff3e;border-color:#c7ff3e}
.btn--secondary{background:transparent;color:#fff;border-color:#ffffff40}
.nav{background:#080b0d;border-bottom:1px solid #ffffff0b}.nav__bar{gap:40px}
.nav__logo{font:500 21px/1 var(--font-text);letter-spacing:-.035em;gap:10px;color:#fff;white-space:nowrap}
.nav__logo img{width:26px;height:26px}.nav__links{justify-content:center;gap:16px}.nav__link{font:400 14px/1 var(--font-text);color:#d5d8d6}
.nav__actions .btn{font-size:13px;padding-inline:20px}.nav__toggle{color:#fff;border-color:#ffffff38;min-width:44px;min-height:44px}
.nav.is-open .nav__links,.nav.is-open .nav__actions{background:#080b0d}.nav.is-open .nav__links{overscroll-behavior:contain}
.midnight-hero{isolation:isolate;overflow:hidden}
.midnight-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 75% at 50% 96%,#c7ff3ef0 0%,#c7ff3ea6 24%,#c7ff3e59 47%,#c7ff3e1a 68%,transparent 90%)}
.midnight-hero::after{content:'';position:absolute;inset:38% 0 0;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,#080b0d28 0 1px,transparent 1px 4px);mask-image:radial-gradient(ellipse 52% 90% at 50% 100%,#000,transparent 88%)}
.midnight-hero>.wrap{display:flex!important;position:relative;z-index:1}
.hero-text{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;height:100%;min-height:0}
.midnight-hero h1{font:400 clamp(52px,6vw,88px)/1.03 'Instrument Serif',Georgia,serif;letter-spacing:-.025em;margin:0;max-width:100%;flex:none}
.midnight-hero h1 em{font-style:italic;color:#c7ff3e}.midnight-hero h1>span{font-style:italic}
.hero__lead{font-size:17px;line-height:1.65;color:#e1e5e0;margin-top:20px;flex:none}
.hero-actions{justify-content:center;gap:12px;margin-top:24px;flex:none}
.hero-stage{position:relative;align-items:end;width:100%;min-height:0;flex:1;margin-top:40px}
.hero-app-slot{height:100%;min-height:0;display:flex;justify-content:center;align-items:end;position:relative}
.native-preview{width:400px;max-width:100%;height:100%;max-height:380px;position:relative;overflow:hidden;border:1px solid #ffffff30;border-radius:16px 16px 10px 10px;padding:0;background:#262626;cursor:zoom-in;box-shadow:0 20px 50px #0006}
.native-preview img{width:100%;height:auto;max-width:none}
.native-preview::after{content:'';position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(transparent,#111714a6);pointer-events:none}
.image-open{position:absolute;right:12px;bottom:12px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffff48;background:#080b0dcf;border-radius:50%;color:#fff;z-index:1}
.native-preview:hover .image-open,.full-app-shot:hover .image-open{background:#c7ff3e;color:#080b0d;border-color:#c7ff3e}
.signal-facts{align-self:center;margin:0 0 20px;display:grid;gap:32px;text-align:left}
.signal-facts>div{display:flex;flex-direction:column-reverse;gap:8px}.signal-facts dt{font-size:13px;font-weight:400;line-height:1.5;color:#d0d6cd}
.signal-facts dd{font:400 44px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;margin:0;color:#fff}
.signal-facts--right{text-align:right}.signal-facts--right dd{font-size:40px}
.product-section{background:#080b0d}
.product-section>.wrap.grid{align-content:stretch;align-items:start}
.product-copy{min-width:0}.product-copy h2{font:400 clamp(38px,4vw,58px)/1.04 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;margin:0}
.product-lead{font-size:17px;line-height:1.75;margin-top:24px;color:#e1e5e0;max-width:42ch}
.feature-list{display:grid;gap:24px;margin-top:32px}
.feature-list h3{font:400 18px/1.5 var(--font-text);color:#fff}
.feature-list p{font-size:16px;line-height:1.75;color:#e1e5e0;max-width:43ch;margin-top:8px}
.product-copy>.link{font-size:14px;color:#c7ff3e;align-self:start;margin-top:28px}
.product-visual{height:100%;min-height:0;grid-column:7/span 6;position:relative}
.full-app-shot{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:16px;background:transparent;cursor:zoom-in}
.full-app-shot img{height:100%;width:100%;object-fit:contain;object-position:50% 0;border-radius:16px}
.full-app-shot .image-open{right:max(12px,calc(50% - 180px));bottom:16px}
.midnight-closing{background:#080b0d}
.midnight-closing>.wrap{row-gap:48px}
.closing__cta{gap:24px;align-items:start;justify-content:start}
.closing__cta h2{font:400 clamp(44px,5vw,72px)/1.04 'Instrument Serif',Georgia,serif;letter-spacing:-.025em;margin:0}
.closing__cta>p{font-size:18px;line-height:1.75;max-width:46ch;color:#e1e5e0}
.closing__cta .btn-row{gap:12px}
.closing__links{gap:32px}.privacy-notes{gap:48px}
.privacy-notes h3{font:400 18px/1.5 var(--font-text)}.privacy-notes p{font-size:16px;line-height:1.75;color:#e1e5e0;max-width:46ch;margin-top:12px}
.footer__legal{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px;color:#c3c9c1}
.footer__legal .nav__logo{font-size:18px}.footer__legal .nav__logo img{width:24px;height:24px}.footer__legal .link{font-size:13px;color:#c3c9c1}
#app-viewer{position:fixed;inset:0;margin:auto;padding:20px;border:1px solid #ffffff30;border-radius:16px;background:#080b0d;color:#fff;max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);width:min(640px,calc(100vw - 32px));overflow:auto;overscroll-behavior:contain}
#app-viewer::backdrop{background:#000e}.viewer-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px}
.viewer-header h2{font:400 16px/1.4 var(--font-text);letter-spacing:0}.viewer-header button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;border:1px solid #ffffff45;border-radius:999px;background:transparent;color:#fff;font:400 13px var(--font-text);cursor:pointer}
.viewer-header button:hover{background:#ffffff15}.viewer-image img{display:block;max-width:100%;width:auto;height:auto;max-height:calc(100svh - 148px);object-fit:contain;margin:auto;border-radius:12px}.viewer-open{overflow:hidden}
.document-page{max-width:800px;margin:0 auto;padding:64px 28px 96px}.document-page h1{font:400 56px/1.04 'Instrument Serif',Georgia,serif;margin:36px 0 24px}
.document-page h2{font:400 34px/1.2 'Instrument Serif',Georgia,serif;margin:40px 0 16px}.document-page p,.document-page li{font-size:16px;line-height:1.85;color:#e1e5e0}
.document-page p+p{margin-top:16px}.document-page code{font-size:13px;background:#ffffff0c;color:#fff;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}.document-page .notice{border-left:2px solid #c7ff3e;padding:12px 20px;background:#c7ff3e08}.document-page .btn{margin-top:24px}.document-page .text-link{font-size:14px;color:#c7ff3e;text-underline-offset:4px;text-decoration:underline}
@media(min-width:1024px) and (max-height:800px){:root{--hgap:24px;--hpadb:24px;--padt:100px;--padb:48px}.midnight-hero h1{font-size:68px}.hero__lead{font-size:16px;line-height:1.6;margin-top:16px}.hero-actions{margin-top:20px}.hero-stage{margin-top:28px}.native-preview{max-height:300px}.product-copy h2{font-size:42px}.product-lead{font-size:16px;margin-top:20px}.feature-list{gap:16px;margin-top:24px}.feature-list h3{font-size:17px}.feature-list p{font-size:15px;line-height:1.65;margin-top:6px}.product-copy>.link{margin-top:20px}}
@media(min-width:640px) and (max-width:1023px){:root{--nav:76px;--padt:112px;--padb:56px}.midnight-hero h1{font-size:68px}.hero-stage{margin-top:40px}.signal-facts{gap:28px}.signal-facts dd{font-size:36px}.signal-facts--right dd{font-size:30px}.signal-facts dt{font-size:12px}.native-preview{width:320px;max-height:500px}.product-section{height:200svh!important;min-height:0!important}.product-section>.wrap.grid{grid-template-columns:1fr;height:100%;grid-template-rows:auto minmax(0,1fr);row-gap:48px}.product-copy{grid-column:1/-1;max-width:650px}.product-copy h2{font-size:48px}.product-lead{max-width:50ch}.feature-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.feature-list h3{font-size:16px}.feature-list p{font-size:15px}.product-visual{grid-column:1/-1;grid-row:2}.full-app-shot img{max-height:100%;object-position:50% 0}.privacy-notes{gap:24px}.privacy-notes p{font-size:15px}.footer__legal{flex-wrap:wrap;gap:20px}.footer__legal>span{order:3;width:100%;font-size:12px}.footer__legal .link{margin-left:auto}.nav__bar{gap:20px}}
@media(max-width:639px){:root{--nav:68px;--hgap:28px;--hpadb:24px;--padt:96px;--padb:40px}.nav__bar{gap:10px}.nav__logo{font-size:18px;gap:8px}.nav__logo img{width:24px;height:24px}.nav__actions .btn{font-size:12px;padding:0 16px}.nav__toggle{border:0}.nav.is-open .nav__links{top:68px}.nav.is-open .nav__actions .btn{font-size:15px}.midnight-hero h1{font-size:46px;line-height:1.06;letter-spacing:-.02em}.hero__lead{font-size:15px;line-height:1.6;margin-top:18px}.hero-actions{margin-top:22px;flex-direction:row;flex-wrap:nowrap;gap:10px;width:100%}.hero-actions .btn{flex:1;width:auto;font-size:12px;padding-inline:14px}.hero-stage{margin-top:22px;grid-template-rows:auto minmax(0,1fr);gap:20px;min-height:0}.signal-facts--left{grid-column:1/-1;display:flex;justify-content:center;gap:32px;text-align:center;margin:0;align-self:start}.signal-facts--left>div{gap:4px}.signal-facts dd{font-size:28px}.signal-facts dt{font-size:10px;line-height:1.4}.signal-facts--right{display:none}.hero-app-slot{grid-column:1/-1;grid-row:2}.native-preview{width:300px;max-height:none;height:100%;border-radius:13px}.image-open{height:32px;width:32px;right:10px;bottom:10px}.product-section{--hm:2}.product-section>.wrap.grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);row-gap:40px;align-content:stretch}.product-copy{grid-column:1/-1}.product-copy h2{font-size:42px}.product-lead{font-size:16px;line-height:1.75;margin-top:20px}.feature-list{gap:20px;margin-top:28px}.feature-list h3{font-size:17px}.feature-list p{font-size:15px;line-height:1.7;margin-top:8px}.product-copy>.link{font-size:13px;margin-top:24px}.product-visual{grid-column:1/-1;grid-row:2;min-height:0}.full-app-shot .image-open{right:16px;bottom:16px}.closing__cta h2{font-size:46px}.closing__cta>p{font-size:16px;line-height:1.75}.closing__cta .btn-row{gap:12px;width:100%}.closing__cta .btn{width:100%;font-size:13px}.midnight-closing>.wrap{row-gap:32px}.closing__links{gap:28px}.privacy-notes{grid-template-columns:1fr;gap:24px}.privacy-notes>.span-6{grid-column:1/-1}.privacy-notes h3{font-size:17px}.privacy-notes p{font-size:14px;line-height:1.75;margin-top:8px}.footer__legal{flex-wrap:wrap;gap:16px;font-size:11px}.footer__legal .nav__logo{font-size:17px;width:100%}.footer__legal>span{order:3;width:100%;font-size:11px}.footer__legal .link{font-size:12px;margin-left:0}.viewer-header{gap:16px}.viewer-header h2{font-size:14px}.viewer-header button{padding-inline:14px}.viewer-image img{max-height:calc(100svh - 140px)}.document-page{padding:40px 24px 64px}.document-page h1{font-size:44px}.document-page h2{font-size:30px}}
@media(max-width:360px){.brand-word{display:none}.midnight-hero h1{font-size:41px}.hero__lead{font-size:14px}.hero-actions .btn{font-size:11px}.signal-facts--left{gap:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.full-app-shot{width:min(100%,400px);height:auto;aspect-ratio:880/1602;max-height:100%;margin-inline:auto;overflow:hidden}.full-app-shot img{object-fit:contain}.full-app-shot .image-open{right:12px;bottom:12px}
@media(max-width:1023px){.product-visual{display:flex;align-items:center;justify-content:center}}
/* a tablet-width window that is not tall (a laptop window, a split screen): the hero is one screen tall, so the
   four facts stacked above and below squeezed the app screenshot to 0px. Put both fact groups on one row above it. */
@media(min-width:640px) and (max-width:1023px) and (max-height:1100px){.hero-stage{grid-template-rows:auto minmax(0,1fr);row-gap:24px;margin-top:28px}.signal-facts{grid-row:1;align-self:start;margin:0;display:flex;gap:28px}.signal-facts>div{gap:4px}.signal-facts--left{grid-column:1/7;justify-content:flex-start}.signal-facts--right{grid-column:7/-1;justify-content:flex-end}.hero-app-slot{grid-column:1/-1;grid-row:2}.native-preview{max-height:none}}

/* Hover: the whole screenshot card grows (a loupe), not just the picture inside it.
   Reduced motion: system.css shortens every transition, so only colours change. */
html:not([data-motion="off"]) :is(.native-preview,.full-app-shot){transition:scale 320ms var(--pm-ease,var(--m-ease)),border-color var(--m-out) var(--m-ease),box-shadow var(--m-out) var(--m-ease)}
.native-preview{transform-origin:50% 100%}
html:not([data-motion="off"]) .image-open{transition:background-color var(--m-out) var(--m-ease),color var(--m-out) var(--m-ease),border-color var(--m-out) var(--m-ease),transform var(--m-out) var(--m-ease)}
.native-preview:focus-visible .image-open,.full-app-shot:focus-visible .image-open{background:#c7ff3e;color:#080b0d;border-color:#c7ff3e}
@media(hover:hover) and (pointer:fine){
 html:not([data-motion="off"]) :is(.native-preview,.full-app-shot):hover{scale:1.06;box-shadow:0 30px 70px #000a}
 html:not([data-motion="off"]) .native-preview:hover{border-color:#ffffff5c}
 html:not([data-motion="off"]) :is(.native-preview,.full-app-shot):hover .image-open{transform:scale(1.08);transition-duration:var(--m-in)}
}
html:not([data-motion="off"]) .viewer-header button{transition:background-color var(--m-out) var(--m-ease),border-color var(--m-out) var(--m-ease)}
html:not([data-motion="off"]) .viewer-header button:hover{border-color:#ffffff70;transition-duration:var(--m-in)}
/* the screenshot viewer: fades and settles 8px in 220ms, leaves in 140ms; the backdrop follows */
html:not([data-motion="off"]) #app-viewer{opacity:0;transform:translateY(8px) scale(.98);transition:opacity 140ms var(--m-ease),transform 140ms var(--m-ease),overlay 140ms allow-discrete,display 140ms allow-discrete}
html:not([data-motion="off"]) #app-viewer[open]{opacity:1;transform:none;transition-duration:220ms}
html:not([data-motion="off"]) #app-viewer::backdrop{background:#0000;transition:background-color 140ms var(--m-ease),overlay 140ms allow-discrete,display 140ms allow-discrete}
html:not([data-motion="off"]) #app-viewer[open]::backdrop{background:#000e;transition-duration:220ms}
@starting-style{
 html:not([data-motion="off"]) #app-viewer[open]{opacity:0;transform:translateY(8px) scale(.98)}
 html:not([data-motion="off"]) #app-viewer[open]::backdrop{background:#0000}
}

/* ================================================================ page motion (product-motion.mjs)
   html.pm is set in <head> before the first paint; without it (reduced motion, headless QA) the page is static.
   --pm-hp: hero scrolled 0-1, --pm-pp: product screenshot passing the screen 0-1, --pm-sp: whole page 0-1. */
:root{--pm-ease:cubic-bezier(.16,1,.3,1)}
.feature-list>div{position:relative;padding-left:18px}
.feature-list>div::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:#c7ff3e}

/* entrance: words, then the app, then the facts; the lime light rises behind them */
@keyframes pm-rise{from{opacity:0;transform:translateY(28px);filter:blur(10px)}}
@keyframes pm-app{from{opacity:0;transform:translateY(56px) scale(.94)}}
@keyframes pm-glow{from{opacity:0;scale:1 .6}}
@keyframes pm-fade{from{opacity:0}}
html.pm .midnight-hero h1{animation:pm-rise 1s var(--pm-ease) backwards}
html.pm .hero__lead{animation:pm-rise 1s var(--pm-ease) .14s backwards}
html.pm .hero-actions{animation:pm-rise 1s var(--pm-ease) .24s backwards}
html.pm .native-preview{animation:pm-app 1.2s var(--pm-ease) .36s backwards}
html.pm .signal-facts>div{animation:pm-rise 1s var(--pm-ease) .56s backwards}
html.pm .signal-facts>div+div{animation-delay:.66s}
html.pm .midnight-hero::before{animation:pm-glow 1.8s var(--pm-ease) backwards;transform-origin:50% 100%}
html.pm .midnight-hero::after{animation:pm-fade 1.6s ease .3s backwards}
html.pm .nav{animation:pm-fade .8s ease backwards}
/* the hero numbers: count up from 0 (product-motion.mjs) while they swell past full size and settle */
.pm-num{display:inline-block;font-variant-numeric:tabular-nums}
@keyframes pm-pop{0%{scale:.55}55%{scale:1.18}100%{scale:1}}
html.pm [data-pm-count]{transform-origin:0 80%}
@media(max-width:639px){html.pm [data-pm-count]{transform-origin:50% 80%}}
html.pm [data-pm-count].pm-pop{animation:pm-pop 1.1s var(--pm-ease)}

/* hero on scroll: the words lift and fade, the app rises toward you, the facts drift apart, the light dims */
html.pm .midnight-hero{--pm-hp:0}
html.pm .midnight-hero h1,html.pm .hero__lead,html.pm .hero-actions{translate:0 calc(var(--pm-hp) * -70px);opacity:calc(1 - var(--pm-hp) * 1.5)}
html.pm .hero__lead{translate:0 calc(var(--pm-hp) * -50px)}
html.pm .hero-actions{translate:0 calc(var(--pm-hp) * -35px)}
html.pm .hero-app-slot{translate:0 calc(var(--pm-hp) * -60px);scale:calc(1 + var(--pm-hp) * .1);transform-origin:50% 100%}
html.pm .signal-facts--left{translate:calc(var(--pm-hp) * -60px) 0;opacity:calc(1 - var(--pm-hp) * 1.6)}
html.pm .signal-facts--right{translate:calc(var(--pm-hp) * 60px) 0;opacity:calc(1 - var(--pm-hp) * 1.6)}
html.pm .midnight-hero::before{opacity:calc(1 - var(--pm-hp) * .8);scale:1 calc(1 + var(--pm-hp) * .35)}
html.pm .midnight-hero::after{opacity:calc(1 - var(--pm-hp))}

/* sections: each line rises out of a blur when it comes into view, 90ms after the one before */
html.pm .pm-reveal{opacity:0;translate:0 36px;filter:blur(8px);transition:opacity .9s var(--pm-ease) var(--pm-d,0s),translate 1s var(--pm-ease) var(--pm-d,0s),filter .9s var(--pm-ease) var(--pm-d,0s)}
html.pm .pm-reveal.is-in{opacity:1;translate:0 0;filter:none}
html.pm .feature-list>div::before{scale:1 0;transform-origin:50% 0;transition:scale .9s var(--pm-ease) calc(var(--pm-d,0s) + .25s)}
html.pm .feature-list>div.is-in::before{scale:1 1}

/* the product screenshot tilts up to face you as it passes through the screen */
html.pm .product-visual{--pm-pp:.5;perspective:1400px}
html.pm .full-app-shot{transform:rotateX(calc((.5 - var(--pm-pp)) * 18deg)) translateY(calc((.5 - var(--pm-pp)) * 60px)) scale(calc(.9 + min(var(--pm-pp), .5) * .2));transform-origin:50% 0;will-change:transform}

/* scroll progress, and a glass nav once the page moves */
.pm-progress{position:fixed;inset:0 0 auto;height:2px;z-index:60;background:#c7ff3e;transform-origin:0 50%;scale:var(--pm-sp,0) 1;pointer-events:none}
html.pm .nav{transition:background-color .35s ease,border-color .35s ease,backdrop-filter .35s ease}
html.pm .nav.is-scrolled:not(.is-open){background:#080b0db3;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:#ffffff17}