/* Lantern landing page. Night-blue ground, one warm light: the page is dark the
   way a room is dark when a lantern is the only thing lit. Section structure
   follows Ember's; colours, type and motion are Lantern's own. */
:root{
  color-scheme:dark;
  --night:#080C16; --night-2:#0D1322; --surface:#121929; --surface-2:#182136;
  --line:rgba(222,229,255,.09); --line-2:rgba(222,229,255,.17);
  --ink:#F2EEE5; --muted:#A0A7B8; --faint:#6E7689;
  --flame:#FFB54A; --flame-2:#FF8B3D; --flame-ink:#1A1206; --flame-soft:rgba(255,181,74,.13);
  --paper:#F3EADA; --paper-ink:#131826; --paper-muted:#59606F;
  --error:#FF8A7A;
  --font:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --display:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-padding-top:96px;background:var(--night)}
body{margin:0;background:var(--night);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-wrap:balance;font-family:var(--display);font-weight:700}
h2{font-size:clamp(38px,4vw,58px);line-height:1.04;letter-spacing:-.032em}
h3{font-size:24px;line-height:1.2;letter-spacing:-.03em}
a{color:inherit;text-underline-offset:5px}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button,a,input,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
::selection{background:var(--flame);color:var(--flame-ink)}
:focus-visible{outline:2px solid var(--flame);outline-offset:4px}
.shell{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;z-index:30;top:-80px;left:20px;padding:10px 18px;border-radius:999px;background:var(--flame);color:var(--flame-ink)}
.skip:focus{top:14px}
.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--flame);margin-bottom:18px}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(8,12,22,.72);border-bottom:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.2)}
.header-inner{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.brand-name{font:700 21px/1 var(--display);letter-spacing:-.028em}
.brand-light{position:relative;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 50% 60%,#FFE3A8 0,var(--flame) 45%,var(--flame-2) 100%);box-shadow:0 0 0 4px rgba(255,181,74,.12),0 0 18px 2px rgba(255,160,60,.55);animation:flicker 3.2s infinite steps(1,end)}
@keyframes flicker{0%,100%{opacity:1}8%{opacity:.86}11%{opacity:1}46%{opacity:.93}49%{opacity:1}71%{opacity:.8}73%{opacity:.97}}
.header-inner nav{display:flex;gap:30px;font-size:14px;color:var(--muted)}
.header-inner nav a,.footer nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;transition:color 180ms}
.header-inner nav a:hover,.footer nav a:hover{color:var(--ink)}

/* buttons */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border:0;border-radius:999px;background:var(--flame);color:var(--flame-ink);font:600 14px/1.3 var(--font);text-decoration:none;white-space:nowrap;box-shadow:0 0 0 0 rgba(255,181,74,0);transition:box-shadow 260ms var(--ease),transform 180ms,background 180ms}
.button:hover{background:#FFC163;box-shadow:0 0 0 6px rgba(255,181,74,.12),0 10px 40px -6px rgba(255,150,50,.55)}
.button:active{transform:translateY(1px)}
.button:disabled{opacity:.7;cursor:default}
.button.small{min-height:40px;font-size:13px;padding:9px 18px}
.button.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.button.ghost:hover{background:rgba(222,229,255,.06);box-shadow:inset 0 0 0 1px rgba(222,229,255,.3)}
.header-actions{display:flex;gap:8px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.hero .cta-row{justify-content:center;margin-top:36px}
.closing .cta-row{justify-content:flex-start}

/* hero: a lantern held in a dark room, lighting scraps of notes */
main{position:relative}
.hero-sky{position:absolute;inset:0 0 auto;height:min(980px,118svh);overflow:hidden;pointer-events:none;z-index:0}
.hero-sky canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-sky::after{content:'';position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(to bottom,rgba(8,12,22,0),var(--night))}
.hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:112px 112px}
.hero-copy{display:flex;flex-direction:column;align-items:center;max-width:980px}
.hero h1{font-size:clamp(44px,5.6vw,80px);line-height:1.02;letter-spacing:-.035em}
.hero h1 span{display:block;margin-top:6px;padding-bottom:.1em;margin-bottom:-.1em;background:linear-gradient(100deg,#FFE0A3 0%,var(--flame) 38%,var(--flame-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(255,160,60,.28))}
.lede{font-size:19px;line-height:1.55;color:var(--muted);margin-top:28px;max-width:600px}
.hero-stage{width:100%;max-width:1040px;margin-top:72px;min-width:0;position:relative;padding:0 14px 14px;border-radius:22px;background:linear-gradient(180deg,rgba(26,33,54,.92),rgba(16,22,37,.92));border:1px solid var(--line-2);box-shadow:0 40px 120px -40px rgba(255,150,50,.35),0 0 0 1px rgba(0,0,0,.4)}
.hero-stage::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,190,90,.55),rgba(255,190,90,0) 35%,rgba(255,190,90,0) 70%,rgba(255,190,90,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero-screen{position:relative;overflow:hidden;padding:8px;border-radius:12px;background:#1E2740;isolation:isolate}
.hero-stage:has(.screen-tabs button:first-child[aria-selected=true]) .hero-screen{border-top-left-radius:0}
.hero-screen img{border-radius:8px}
.example-tabs{display:flex;gap:6px}
.example-tabs button{border:0;border-radius:999px;background:transparent;min-height:40px;padding:8px 16px;font-size:13px;line-height:1.3;color:var(--muted);transition:color 180ms,background 220ms}
.example-tabs button[aria-selected=true]{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.example-tabs button:hover{color:var(--ink)}
/* the hero's screens: browser-style tabs on the frame; the active one takes the colour of the panel the screen sits in and runs into it */
.screen-tabs{display:flex;gap:4px;padding-top:10px}
.screen-tabs button{border:0;border-radius:10px 10px 0 0;background:transparent;min-height:42px;padding:10px 18px;font-size:13px;font-weight:500;line-height:1.3;color:var(--muted);transition:color 180ms,background 220ms}
.screen-tabs button:hover{color:var(--ink);background:rgba(222,229,255,.06)}
.screen-tabs button[aria-selected=true]{background:#1E2740;color:var(--ink)}

/* watch: until there is a video, the light shows the idea */
.watch{position:relative;z-index:1}
.watch h2{margin-bottom:36px;max-width:680px}
.watch h2 br{display:none}
.video-placeholder{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:14px;padding-bottom:30px;border-radius:22px;background:radial-gradient(120% 90% at 50% 100%,#141C30 0%,var(--night-2) 60%);border:1px solid var(--line);overflow:hidden;isolation:isolate}
.video-placeholder canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.placeholder-label{position:absolute;top:22px;left:24px;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);background:rgba(8,12,22,.6);color:var(--muted);font:500 11px/1.4 var(--mono)}
.video-path{display:flex;align-items:center;gap:18px;font:500 13px/1.4 var(--mono);color:var(--faint);align-self:center}
.video-path>span:not(.path-line){transition:color 400ms,text-shadow 400ms}
.video-path>span.lit{color:var(--flame);text-shadow:0 0 18px rgba(255,170,60,.6)}
.path-line{width:64px;height:1px;background:var(--line-2)}
.play-symbol{order:-1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--flame);color:var(--flame-ink);box-shadow:0 0 0 10px rgba(255,181,74,.1),0 0 60px 6px rgba(255,150,50,.45)}
.play-symbol svg{margin-left:3px}
.video-placeholder>p{font-size:13px;color:var(--muted);align-self:center}

/* statement */
.statement{position:relative;padding-block:128px 120px}
.statement p{font:600 clamp(30px,3.3vw,46px)/1.18 var(--display);letter-spacing:-.028em;max-width:1000px;color:var(--faint)}
.statement span{color:var(--ink)}
.statement br{display:none}

/* use cases: four cards, each lit differently */
.cases-section{padding-bottom:128px}
.cases-section .shell>h2{max-width:700px;margin-bottom:44px}
.cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.case{position:relative;display:flex;flex-direction:column;min-width:0;min-height:340px;padding:26px 24px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:transform 420ms var(--ease),box-shadow 420ms var(--ease)}
.case:hover{transform:translateY(-4px)}
.case-index{font:500 12px/1 var(--mono);color:var(--faint)}
.case h3{font-size:24px;margin-top:22px;max-width:230px}
.case>div{margin-top:auto;padding-top:28px}
.material-label{display:inline-block;font:500 11px/1.4 var(--mono);padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.case p{font-size:14px;line-height:1.6;margin-top:12px;color:var(--muted)}
.case:nth-child(1){background:linear-gradient(160deg,#FFC566 0%,var(--flame) 45%,var(--flame-2) 100%);border-color:transparent;color:var(--flame-ink);box-shadow:0 30px 80px -30px rgba(255,140,50,.6)}
.case:nth-child(1) .case-index,.case:nth-child(1) p{color:rgba(26,18,6,.72)}
.case:nth-child(1) .material-label{border-color:rgba(26,18,6,.25);color:var(--flame-ink)}
.case:nth-child(3){background:var(--paper);border-color:transparent;color:var(--paper-ink)}
.case:nth-child(3) .case-index,.case:nth-child(3) p{color:var(--paper-muted)}
.case:nth-child(3) .material-label{border-color:rgba(19,24,38,.2);color:var(--paper-ink)}
.case:nth-child(4){background:transparent;border:1px dashed var(--line-2)}
.case:nth-child(2)::after,.case:nth-child(4)::after{content:'';position:absolute;inset:auto -40% -60% auto;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,181,74,.16),rgba(255,181,74,0) 65%);opacity:0;transition:opacity 500ms}
.case:nth-child(2):hover::after,.case:nth-child(4):hover::after{opacity:1}

/* workflow: pinned screen, steps light up as they pass */
.workflow{position:relative;padding-block:40px 80px;border-block:1px solid var(--line);background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 50%,var(--night) 100%)}
.workflow-steps{list-style:none;padding:0;margin:0;display:grid;gap:64px}
.workflow-step{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center;min-height:440px}
.step-copy{grid-column:2;grid-row:1;padding:30px 0;transition:opacity 400ms}
.step-number{display:block;font:500 12px/1 var(--mono);color:var(--flame);margin-bottom:20px}
.step-number span{color:var(--faint);margin-left:6px}
.step-copy h2{font-size:clamp(32px,2.9vw,42px);line-height:1.08;max-width:430px}
.step-copy>p{font-size:16px;color:var(--muted);line-height:1.65;max-width:420px;margin-top:20px}
.step-visual{grid-column:1;grid-row:1;min-width:0}
.step-image{position:relative;background:var(--surface);overflow:hidden;border-radius:14px;isolation:isolate}
/* control */
.control{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center;padding-block:128px}
.section-copy h2{font-size:clamp(36px,3.6vw,52px)}
.section-copy p{font-size:16px;color:var(--muted);margin-top:24px;max-width:460px}
.section-copy p+p{margin-top:14px}
.section-copy .eyebrow{font-size:12px;color:var(--flame);margin:0 0 18px}
.section-copy .eyebrow+h2+p{margin-top:24px}
.example-panel{min-width:0;padding:16px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.example-tabs{padding:4px;border-radius:999px;background:var(--night);border:1px solid var(--line);width:max-content;max-width:100%}
#example-content{padding:28px 16px 20px;min-height:260px}
#example-content:focus-visible{outline-offset:-2px}
/* features */
.features{padding-bottom:128px}
.features>h2{max-width:820px;margin-bottom:44px}
.feature-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.feature{min-width:0;padding:28px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.feature h3{font-size:22px}
.feature p{font-size:15px;line-height:1.6;color:var(--muted);margin-top:12px;max-width:560px}
.feature-board{grid-column:span 8}
.feature-types{grid-column:span 4}
.feature-board-image,.feature-type-image{position:relative;overflow:hidden;border-radius:12px;margin-top:24px}
.feature-material,.feature-buffer,.feature-voice{grid-column:span 4}
.material-types{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.material-types li{font:500 12px/1.4 var(--mono);padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink)}
.publish-path{display:flex;align-items:center;gap:14px;margin-top:26px;font:500 13px/1.4 var(--mono)}
.publish-path span{padding:7px 13px;border-radius:999px;background:var(--surface-2)}
.publish-path span:last-child{background:var(--flame-soft);color:var(--flame)}
.publish-path b{font-weight:400;color:var(--flame)}

/* pricing: Free, Pro and Custom (a slider over the larger packages) */
.pricing{padding-bottom:128px}
.pricing>h2{max-width:760px}
.pricing h2 br{display:none}
.pricing-lede{max-width:620px;margin-top:20px;color:var(--muted);font-size:16px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;margin-top:72px}
.plan{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.plan-card{display:flex;flex-direction:column;min-height:310px;padding:26px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.plan h3{font-size:28px;margin-bottom:14px}
.plan-u{color:var(--muted);font-size:15px}.plan-u b{color:var(--ink);font-weight:600}
.plan-s{color:var(--faint);font-size:13px;margin-top:4px}
.plan-p{margin-top:auto;padding-top:24px;color:var(--muted);font-size:14px}.plan-p b{font:600 40px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.plan.pop{margin-top:-38px;gap:0}.plan.pop>.plan-b{margin-top:12px}.plan.pop .plan-f{margin-top:18px}
.plan-tag{display:flex;align-items:center;justify-content:center;height:38px;margin-bottom:0;border-radius:20px 20px 0 0;background:linear-gradient(90deg,#FFC566,var(--flame) 50%,var(--flame-2));color:var(--flame-ink);font-size:13px;font-weight:600}
.plan.pop .plan-card{background:linear-gradient(180deg,rgba(255,181,74,.18),var(--surface) 70%);border-color:rgba(255,181,74,.45);border-top:0;border-radius:0 0 20px 20px;box-shadow:0 40px 100px -50px rgba(255,150,50,.55)}
.plan-b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-2);transition:background 180ms,box-shadow 240ms}
.plan-b:hover{background:#202a42}
.plan-b.main{background:var(--flame);color:var(--flame-ink);box-shadow:none}.plan-b.main:hover{background:#FFC163;box-shadow:0 0 0 6px rgba(255,181,74,.12),0 10px 40px -6px rgba(255,150,50,.55)}
.plan-f{list-style:none;margin:6px 0 0;padding:0 6px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.plan-f li{display:flex;gap:10px;align-items:flex-start}.plan-f svg{flex-shrink:0;margin-top:3px;color:var(--flame)}
.plan-r{margin-top:22px}
.plan-ticks{position:relative;height:18px;margin:0 9px 6px;font-size:11px;color:var(--faint)}
.plan-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap;transition:color 160ms}.plan-ticks span.on{color:var(--ink);font-weight:600}
.plan-range{width:100%;accent-color:var(--flame);cursor:pointer}

/* questions */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:80px;padding-bottom:128px}
.faq h2{font-size:clamp(40px,4vw,58px)}
.faq>div>p{font-size:16px;color:var(--muted);margin-top:20px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;padding:22px 0;font:600 18px/1.4 var(--display);letter-spacing:-.02em;min-height:64px;transition:color 180ms}
.faq summary:hover{color:var(--flame)}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span{position:relative;width:16px;height:16px;flex-shrink:0}
.faq summary>span::before,.faq summary>span::after{content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:var(--muted);transition:transform 260ms var(--ease),background 180ms}
.faq summary>span::after{transform:rotate(90deg)}
.faq details[open] summary>span::before{transform:rotate(45deg);background:var(--flame)}
.faq details[open] summary>span::after{transform:rotate(135deg);background:var(--flame)}
.faq details p{font-size:15px;color:var(--muted);line-height:1.65;padding:0 36px 24px 0}

/* closing: the one fully lit surface on the page */
.closing{position:relative;padding-block:120px 128px;background:radial-gradient(90% 120% at 50% 110%,#FF9440 0%,var(--flame) 55%,#FFC566 100%);color:var(--flame-ink);overflow:hidden;isolation:isolate}
.closing canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.closing-inner>h2{max-width:900px}
.closing h2{font-size:clamp(44px,5vw,72px);line-height:1.02;letter-spacing:-.035em}
.closing-inner>p{max-width:520px;margin-top:24px;color:rgba(26,18,6,.75);font-size:17px}
.closing-inner>p.trial-note{font-size:14px;margin-top:10px}
.closing .cta-row{margin-top:30px}
.closing .button{background:var(--paper-ink);color:var(--ink)}
.closing .button:hover{background:#000;box-shadow:0 10px 30px -8px rgba(26,18,6,.6)}
.closing .button.ghost{background:transparent;color:var(--flame-ink);box-shadow:inset 0 0 0 1px rgba(26,18,6,.35)}
.closing .button.ghost:hover{background:rgba(26,18,6,.08)}
:where(.closing) :focus-visible{outline-color:var(--flame-ink)}

/* footer */
.footer{display:flex;justify-content:space-between;align-items:center;gap:28px;padding-block:26px;font-size:14px}
.footer-wordmark{display:flex;align-items:center;gap:10px;font:700 17px/1 var(--display);letter-spacing:-.028em}
.footer-wordmark::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--flame);box-shadow:0 0 12px rgba(255,170,60,.7)}
.footer nav{display:flex;gap:28px;font-size:13px;color:var(--muted)}

/* scroll reveal: text warms up from the dark as it enters */
.js .rv{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity 900ms var(--ease),transform 900ms var(--ease),filter 900ms var(--ease)}
.js .rv.in{opacity:1;transform:none;filter:none}
.js h2.rv.in{animation:warm 1.6s var(--ease) both}
@keyframes warm{0%{text-shadow:0 0 0 rgba(255,170,60,0)}35%{text-shadow:0 0 34px rgba(255,170,60,.45)}100%{text-shadow:0 0 0 rgba(255,170,60,0)}}
.closing h2.rv.in{animation:none}

/* screenshot viewer */
body.dialog-open{overflow:hidden}
#screen-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--night);color:var(--ink);overflow:hidden}
#screen-dialog[open]{display:flex;flex-direction:column}
#screen-dialog::backdrop{background:#000}
.dialog-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;border-bottom:1px solid var(--line)}
.dialog-bar h2{font-size:20px;letter-spacing:-.03em}
.dialog-bar>div{display:flex;gap:8px}
.dialog-bar button{min-height:42px;border:1px solid var(--line-2);border-radius:999px;background:transparent;padding:8px 16px;font-size:13px;transition:border-color 180ms,color 180ms}
.dialog-bar button:hover{color:var(--flame);border-color:var(--flame)}
.screen-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--night-2);padding:24px}
.screen-scroll:focus-visible{outline-offset:-4px}
.screen-canvas{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.screen-canvas img{display:block;position:static;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.screen-scroll.zoomed .screen-canvas{width:max(1600px,120%);height:auto;display:block}
.screen-scroll.zoomed .screen-canvas img{width:100%;height:auto;max-width:none;max-height:none}

/* complete screenshots, with the image itself as the accessible control */
.screenshot-trigger{display:block;width:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;appearance:none;text-align:inherit;cursor:zoom-in}
.screenshot-trigger img{display:block;width:100%;height:auto;object-fit:contain;border-radius:inherit}
.step-image.has-screenshot,.feature-board-image,.feature-type-image{box-shadow:0 0 0 1px var(--line-2)}

/* pinned workflow (enabled by ember.js when motion and height allow) */
.workflow-scroll .workflow-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
.workflow-stage{min-width:0}
.workflow-stage-inner{position:sticky;top:var(--workflow-pin-top,88px);display:flex;flex-direction:column;justify-content:center}
.workflow-frame{width:100%;max-width:min(100%,calc(160svh - 280px));margin-inline:auto;padding:12px;border-radius:20px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 40px 120px -50px rgba(255,150,50,.4)}
.workflow-image{aspect-ratio:8/5;border-radius:10px;overflow:hidden;background:var(--night-2)}
.workflow-frame .step-track{display:flex;gap:6px;padding:12px 4px 2px}
.step-track button{display:flex;align-items:center;flex:1;min-width:0;min-height:36px;border:0;padding:0;background:transparent;cursor:pointer}
.step-track button span{display:block;width:100%;height:3px;border-radius:3px;background:var(--line-2);transition:background 300ms,box-shadow 300ms}
.step-track button[aria-current=step] span{background:var(--flame);box-shadow:0 0 12px rgba(255,170,60,.7)}
.step-track button:hover span{background:rgba(255,181,74,.6)}
.workflow-scroll .workflow-steps{display:block;padding-bottom:var(--workflow-end-space,0px)}
.workflow-scroll .workflow-step{display:flex;flex-direction:column;justify-content:center;min-height:clamp(280px,42svh,420px);padding-block:40px;gap:0}
.workflow-scroll .step-copy{padding:0;width:100%;opacity:.28}
.workflow-scroll .step-visual{display:none}
.workflow[data-active-step="0"] [data-step="0"] .step-copy,.workflow[data-active-step="1"] [data-step="1"] .step-copy,.workflow[data-active-step="2"] [data-step="2"] .step-copy,.workflow[data-active-step="3"] [data-step="3"] .step-copy,.workflow[data-active-step="4"] [data-step="4"] .step-copy{opacity:1}

@media(max-width:1100px){
.cases{grid-template-columns:repeat(2,minmax(0,1fr))}.case{min-height:280px}
 .workflow-step,.workflow-scroll .workflow-grid{gap:40px}.control,.faq{gap:52px}
}
@media(max-width:1000px){
 .shell{width:calc(100% - 48px)}.header-inner nav{gap:18px}
 .hero{padding-block:80px 88px}.lede{font-size:17px}
 .feature-board,.feature-types{grid-column:span 6}
}
@media(max-width:800px){
 html{scroll-padding-top:80px}.header-inner{min-height:60px}.header-inner nav{display:none}
 .hero-sky{height:min(760px,100svh)}
 .hero{padding-block:56px 64px}.hero h1{font-size:46px}.hero-stage{margin-top:48px}
 h2,.faq h2{font-size:38px}
 .video-placeholder{aspect-ratio:4/3;padding-bottom:20px}.play-symbol{width:52px;height:52px}
 .statement{padding-block:88px 80px}.statement p{font-size:32px}
 .cases-section,.features,.faq{padding-bottom:88px}
 .workflow{padding-block:56px}.workflow-steps{gap:56px}
 .workflow-step{display:flex;flex-direction:column;align-items:stretch;gap:24px;min-height:0}
 .step-copy{padding:0;max-width:580px}.step-copy h2{font-size:34px}
 .control{grid-template-columns:1fr;gap:36px;padding-block:88px}
 .feature-grid{display:flex;flex-direction:column}
 .faq{grid-template-columns:1fr;gap:28px}.faq>div>p br{display:none}
 .plans{grid-template-columns:1fr;margin-top:40px}.plan.pop{margin-top:0}.plan-card{min-height:0}.pricing{padding-bottom:88px}
 .closing{padding-block:80px 88px}.closing h2{font-size:48px}
 .workflow-scroll .workflow-grid{display:block}
 .workflow-scroll .workflow-stage{position:sticky;top:60px;z-index:5;background:var(--night);padding-top:12px}
 .workflow-scroll .workflow-stage-inner{position:static;height:auto}
 .workflow-scroll .workflow-frame{max-width:min(100%,416px,43.2svh);padding:8px}
 .workflow-scroll .workflow-step{min-height:clamp(220px,36svh,300px);padding-block:28px}
}
@media(max-width:520px){
 .shell{width:calc(100% - 32px)}.header-inner{gap:12px}.brand-name{font-size:19px}.button.small{font-size:12px;padding-inline:14px}
 .hero{padding-top:40px}.hero h1{font-size:38px;line-height:1.04}
 .lede{font-size:15px;margin-top:20px}.cta-row{margin-top:24px}
 .header-actions .ghost{display:none}
 .hero-stage{padding:0 8px 8px;border-radius:16px}.screen-tabs button{padding:8px 12px;font-size:12px}
 h2,.faq h2,.section-copy h2{font-size:32px}
 .watch h2{margin-bottom:24px}.video-placeholder{border-radius:16px}
 .play-symbol{display:none}.placeholder-label{top:12px;left:12px;font-size:10px}.video-path{font-size:10px;gap:8px}.path-line{width:18px}.video-placeholder>p{font-size:11px}
 .statement p{font-size:27px}
 .cases{grid-template-columns:1fr}.case{min-height:0}.case h3{font-size:22px}
 .step-copy h2{font-size:30px}.step-copy>p{font-size:15px}
 .feature{padding:22px}.feature h3{font-size:21px}
 .faq summary{font-size:17px}.faq details p{padding-right:12px}
 .closing h2{font-size:38px}.closing-inner>p{font-size:16px}
 .footer{align-items:flex-start}.footer nav{flex-direction:column;gap:0;text-align:right}.footer nav a{justify-content:flex-end}
 .dialog-bar{padding:10px 12px;gap:10px}.dialog-bar h2{font-size:17px}.dialog-bar button{padding:8px 12px;font-size:12px}.screen-scroll{padding:12px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}
 .js .rv{opacity:1;transform:none;filter:none}
}

/* A hint under a step: the tool it works with, in one line. */
.step-hint{display:flex;align-items:center;gap:12px;margin-top:22px;max-width:420px;font-size:14px;line-height:1.5;color:var(--muted)}
.tool-logos{display:flex;gap:6px;flex-shrink:0}
.tool-logo{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tool-logo img{width:100%;height:100%;object-fit:cover}
.tool-fathom{background:#000}.tool-fireflies{background:#fff}.tool-granola{background:#B5C64B}.tool-buffer{background:#fff}
/* The source-to-post example: the material, then the post made from it. */
.example-meta{font:500 12px/1.4 var(--mono);color:var(--flame);margin:0 0 10px}
.example-notes+.example-meta{margin-top:22px}
.example-notes{margin:0;padding-left:18px;font-size:15px;line-height:1.6;color:var(--ink)}
.example-notes li+li{margin-top:8px}
.example-post{font-size:15px;line-height:1.6;color:var(--ink)}
.example-post p+p{margin-top:12px}
/* The network in the hero, swapped every couple of seconds by ember.js. */
.net-word{display:inline-block;color:var(--ink);font-weight:500;transition:opacity 280ms var(--ease),transform 280ms var(--ease)}
.net-word.out{opacity:0;transform:translateY(-.35em)}
/* The hero line ends on "drafts." whichever network is shown; on narrow screens it wraps on its own. */
.hero .lede{max-width:760px}
@media(max-width:800px){.lede-br{display:none}.hero .lede{max-width:600px}}

/* Inside Lantern: each card draws a small, live piece of the app. Pieces fade in when the card
   is on screen (.in comes from the reveal in light.js); with reduced motion they are simply there. */
.feature{display:flex;flex-direction:column}
.js .feature .pop{opacity:0;transform:translateY(8px)}
.js .feature.in .pop{animation:pop .55s var(--ease) both}
.feature .d1{animation-delay:.15s!important}.feature .d2{animation-delay:.3s!important}.feature .d3{animation-delay:.45s!important}
.feature .d4{animation-delay:.6s!important}.feature .d5{animation-delay:.75s!important}.feature .d6{animation-delay:.9s!important}
@keyframes pop{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .feature .pop{opacity:1;transform:none}}

.mini-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:24px;flex:1}
.mini-day{display:flex;flex-direction:column;gap:6px;min-height:190px;padding:8px 6px;border-radius:10px;background:var(--night-2);border:1px solid var(--line)}
.mini-day>span{font:500 11px/1 var(--mono);color:var(--faint);padding:2px 2px 4px}
.mini-post{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line-2);box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.mini-post b{font:600 11.5px/1.3 var(--display);color:var(--ink)}
.mini-net{font:600 9.5px/1 var(--mono);color:var(--flame);letter-spacing:.02em}
.mini-type{font-size:10px;line-height:1.2;color:var(--muted)}

.mini-types{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.mini-types>span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--night-2);border:1px solid var(--line-2);font-size:12.5px}
.mini-types>span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.t1{--c:#3FB37F}.t2{--c:#5B8CFF}.t3{--c:#FF8B3D}.t4{--c:#B48CFF}
.mini-structure{width:100%;margin:8px 0 0;padding:12px 14px 12px 32px;border-radius:12px;background:var(--night-2);border:1px dashed var(--line-2);font-size:12.5px;line-height:1.7;color:var(--muted)}

.mini-material{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:22px;justify-items:stretch}
.mini-file{padding:8px 10px;border-radius:8px;background:var(--night-2);border:1px solid var(--line-2);font:500 11.5px/1.3 var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-file::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:2px;background:var(--flame);vertical-align:1px}
.mini-arrow{grid-column:1/-1;justify-self:center;color:var(--flame);font-size:18px;line-height:1}
.mini-insights{grid-column:1/-1;display:flex;gap:6px;justify-content:center}
.mini-insights i{font-style:normal;font:600 11px/1 var(--mono);padding:6px 10px;border-radius:999px;background:var(--flame-soft);color:var(--flame)}

.mini-voice{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.mini-chips{display:flex;flex-wrap:wrap;gap:6px}
.mini-chips span{padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.mini-chips .on{border-color:var(--flame);background:var(--flame-soft);color:var(--ink)}
.mini-draft{display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:12px;background:var(--night-2);border:1px solid var(--line)}
.mini-line{height:7px;border-radius:7px;background:linear-gradient(90deg,var(--line-2),rgba(222,229,255,.28),var(--line-2));background-size:200% 100%}
.feature.in .mini-line{animation:type 1.1s var(--ease) both,shine 2.4s linear 1.2s infinite}
.mini-line.l1{width:92%}.mini-line.l2{width:78%;animation-delay:.9s,2.1s!important}.mini-line.l3{width:86%;animation-delay:1.1s,2.3s!important}.mini-line.l4{width:44%;animation-delay:1.3s,2.5s!important}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes shine{to{background-position:-200% 0}}

.mini-tools{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-tools li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--night-2);border:1px solid var(--line)}
.mini-tools .tool-logo{width:34px;height:34px;border-radius:9px;flex-shrink:0}
.mini-tools b{display:block;font:600 13.5px/1.2 var(--display);color:var(--ink)}
.mini-tools small{display:block;font-size:11.5px;line-height:1.3;color:var(--muted);margin-top:2px}

@media(max-width:1000px){.feature-material,.feature-buffer,.feature-voice{grid-column:span 6}.feature-voice{grid-column:span 12}}
@media(max-width:800px){.mini-week{grid-template-columns:repeat(7,minmax(64px,1fr));overflow-x:auto}.mini-day{min-height:150px}}

/* nav: the Resources menu, and the menu button that stands in for the nav on a small screen */
.nav-menu{position:relative;display:inline-flex}
.nav-menu>button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;transition:color 180ms}
.nav-menu>button:hover,.nav-menu:focus-within>button,.nav-menu.open>button{color:var(--ink)}
.nav-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav-menu ul{position:absolute;top:100%;left:-14px;min-width:190px;margin:0;padding:8px;list-style:none;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 160ms,transform 160ms var(--ease),visibility 160ms}
.nav-menu:hover ul,.nav-menu:focus-within ul,.nav-menu.open ul{opacity:1;visibility:visible;transform:none}
.nav-menu.shut ul{opacity:0;visibility:hidden}
.header-inner nav .nav-menu li a{display:flex;min-height:40px;padding:0 12px;border-radius:9px;color:var(--ink);white-space:nowrap}
.header-inner nav .nav-menu li a:hover{background:rgba(222,229,255,.07)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.nav-toggle span{width:16px;height:1.5px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
@media(max-width:800px){
 .header-inner{gap:10px}
 .header-actions{order:2;margin-left:auto}
 .nav-js .nav-toggle{display:inline-flex;order:3}
 .site-header.open nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 16px;background:var(--night-2);border-bottom:1px solid var(--line);font-size:16px}
 .site-header.open .nav-menu{display:block}
 .site-header.open .nav-menu>button{display:none}
 .site-header.open .nav-menu ul{position:static;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none}
 .site-header.open nav .nav-menu li a{min-height:44px;padding:0;color:inherit}
}
@media(max-width:520px){.site-header.open nav{padding-inline:16px}}

/* Inside Lantern: the Claude connector, announced before it is offered */
.feature-claude{grid-column:span 12;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:40px}
.soon{display:inline-flex;margin:0 0 16px;padding:5px 11px;border-radius:999px;background:var(--flame-soft);color:var(--flame);font:600 12px/1.3 var(--font);max-width:none}
.feature p.soon{margin-top:0;font-size:12px;line-height:1.3;color:var(--flame)}
.mini-mcp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.mini-mcp li{padding:7px 12px;border-radius:999px;background:var(--night-2);border:1px solid var(--line-2);font:13px/1.3 ui-monospace,'SF Mono',Menlo,monospace;color:var(--ink)}
@media(max-width:1000px){.feature-claude{grid-template-columns:minmax(0,1fr);gap:22px}}

/* hero: the product is in beta, said once, above the headline */
.beta{display:inline-flex;margin:0 0 22px;padding:5px 13px;border-radius:999px;background:var(--flame-soft);box-shadow:inset 0 0 0 1px rgba(255,181,74,.35);color:var(--flame);font:600 12px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase}

/* ask an AI: a second opinion on Lantern, from the assistant the visitor already uses */
.ask{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:80px;padding-bottom:128px}
.ask-defs{position:absolute}
.ask h2{font-size:clamp(38px,4vw,56px)}
.ask>div>p:not(.eyebrow){max-width:460px;margin-top:22px;font-size:17px;line-height:1.65;color:var(--muted)}
.ask-panel{padding:26px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:0 40px 100px -60px rgba(255,150,50,.45)}
.ask-thread{display:flex;flex-direction:column;gap:14px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.ask-q{align-self:flex-end;max-width:78%;padding:14px 18px;border-radius:18px 18px 4px 18px;background:var(--flame-soft);box-shadow:inset 0 0 0 1px rgba(255,181,74,.28);font-size:15px;line-height:1.5}
.ask-a{align-self:flex-start;max-width:88%;padding:18px 20px;border-radius:18px 18px 18px 4px;background:var(--night-2);border:1px solid var(--line)}
.ask-a p{font-size:15px;line-height:1.65;color:#C6CAD6}
.ask-logos{display:flex;gap:10px;margin-bottom:12px}
.ask-logos svg{width:18px;height:18px}
.ask-buttons{display:flex;flex-wrap:wrap;gap:10px;padding-top:22px}
.ask-button{flex:1 1 150px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 16px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);font:600 14px/1.3 var(--font);text-decoration:none;white-space:nowrap;transition:box-shadow 220ms var(--ease),background 180ms}
.ask-button:hover{background:#1E2942;box-shadow:inset 0 0 0 1px rgba(255,181,74,.5),0 10px 30px -12px rgba(255,150,50,.5)}
.ask-button svg{width:18px;height:18px;flex-shrink:0}
@media(max-width:1000px){.ask{grid-template-columns:minmax(0,1fr);gap:36px}}
@media(max-width:800px){.ask{padding-bottom:88px}}
@media(max-width:520px){.ask-panel{padding:18px}.ask-q,.ask-a{max-width:100%}}

/* compare: a week of posts with a general assistant, and with Lantern */
.compare{padding-bottom:128px}
.compare>h2{max-width:820px}
.compare-intro{max-width:720px;margin-top:24px;font-size:17px;line-height:1.65;color:var(--muted)}
.compare-table{width:100%;margin-top:44px;border-collapse:separate;border-spacing:0;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.55;text-align:left}
.compare-table th,.compare-table td{padding:18px 22px;vertical-align:top}
.compare-table thead th{font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--muted);padding-block:16px}
.compare-table tbody th,.compare-table tbody td{border-top:1px solid var(--line)}
.compare-table tbody th{width:17%;font-weight:700;color:var(--ink)}
.compare-table td{color:#C6CAD6}
.compare-table .compare-us{background:var(--flame-soft);color:var(--ink)}
.compare-table thead .compare-us{color:var(--flame);font-weight:600}
.compare-time{width:21%;white-space:nowrap;font-variant-numeric:tabular-nums}
.compare-total th,.compare-total td{border-top:1px solid var(--line-2)!important;font-weight:700;color:var(--ink);font-size:16px}
.compare-total .compare-time{white-space:normal;color:var(--flame)}
.compare-note{max-width:720px;margin-top:16px;font-size:13px;line-height:1.55;color:var(--faint)}
.compare-close{max-width:720px;margin-top:36px;font-size:18px;line-height:1.6;color:var(--ink)}
.compare .cta-row{margin-top:28px}
@media(max-width:800px){.compare{padding-bottom:88px}.compare-table th,.compare-table td{padding:16px}}
@media(max-width:640px){
 .compare-table{display:block;margin-top:32px;border:0;border-radius:0;overflow:visible;background:none}
 .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .compare-table tbody{display:grid;gap:12px}
 .compare-table tr{display:block;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
 .compare-table tbody th,.compare-table tbody td{display:block;width:auto;padding:0;border:0!important;background:none}
 .compare-table tbody th{font-size:18px;margin-bottom:4px}
 .compare-table tbody td{margin-top:12px;white-space:normal}
 .compare-table tbody td::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--faint)}
 .compare-table tbody td.compare-us::before{color:var(--flame)}
 .compare-table tbody td.compare-us{background:none}
 .compare-table tr.compare-total{background:linear-gradient(180deg,rgba(255,181,74,.17),var(--surface) 70%);border-color:rgba(255,181,74,.45)}
 .compare-close{font-size:17px}
}