/* Lupii home: one thread runs from loose chat, through the monster, out as a clean order. */
/* Each section is a full-bleed colour act with one oversized idea. Nothing is pinned or scroll-driven. */
:root{
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --rad:clamp(28px,4vw,56px);--pad:clamp(96px,10vw,152px);--nav:88px;
}
/* Only the root clips sideways: a clipped body becomes its own scroller and the sticky nav stops sticking. */
body{background:var(--tint);overflow:visible}
.yellow{color:inherit}
.eyebrow{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.09em;line-height:1.3;text-transform:uppercase}
.lead{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.45}
.lead em,.h2 em{font-family:var(--hand);font-style:italic;font-weight:600}
.lead em{font-size:1.14em;line-height:0}

/* Nav: one floating bar */
.nav{top:12px;height:60px;margin-top:12px;background:none;pointer-events:none}
.nav .wrap{pointer-events:auto;width:min(1240px,calc(100% - 24px));gap:22px;padding:0 9px 0 22px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 0 0 1px rgba(12,10,29,.06),0 12px 32px -20px rgba(12,10,29,.4)}
.nav .logo img{height:34px}
.nav .btn.cta{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.language-trigger{border-color:transparent}
.menu-tab{border-color:var(--ink);background:var(--ink)}
.menu-tab span{background:var(--paper);box-shadow:0 -5px 0 var(--paper),0 5px 0 var(--paper)}
@media(hover:hover) and (pointer:fine){.nav .btn.cta:hover{background:var(--purple-text);border-color:var(--purple-text);color:var(--paper)}}

/* Hero: the thread */
.hero{position:relative;overflow:hidden;padding-bottom:calc(var(--rad) + clamp(56px,7vw,104px));background:var(--tint);text-align:center}
.machine{--h:clamp(220px,min(25vw,33svh),440px);position:relative;height:var(--h);margin-top:clamp(0px,1vw,14px)}
.machine-in{position:absolute;left:50%;top:0;width:calc(var(--h) * 4);height:var(--h);transform:translateX(-50%)}
.machine svg{width:100%;height:100%;overflow:visible}
.machine .ribbon{fill:none;stroke:var(--ink);stroke-width:58;stroke-linecap:round}
.machine text{font-family:var(--sans);font-size:27px;font-weight:600;letter-spacing:-.01em;fill:var(--purple)}
.machine .t-out{font-weight:700;fill:var(--yellow)}
.machine .livelogo{position:absolute;left:38.75%;top:26%;width:22.5%;animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{translate:0 -3.5%}}
.hero .copy{position:relative;z-index:2;width:min(1200px,calc(100% - 40px));margin:clamp(10px,1.6vw,26px) auto 0}
.hero .copy>*{opacity:0;animation:up .8s var(--ease-out) forwards}
.hero .copy>*:nth-child(3){animation-delay:.18s}
.hero .copy>*:nth-child(4){animation-delay:.26s}
@keyframes up{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}
.hero .eyebrow{color:var(--purple-text)}
.hero h1{margin-top:16px;font-size:clamp(2.8rem,min(10vw,15svh),10.5rem);font-weight:800;line-height:.88;letter-spacing:-.05em;word-spacing:.04em;text-wrap:balance}
.hero h1 .w{display:inline-block;opacity:0;animation:up .8s var(--ease-out) forwards;animation-delay:calc(var(--i) * 70ms + 60ms)}
.hero h1 .w.yellow{padding:.02em .16em .1em;border-radius:.2em;background:var(--yellow);rotate:-3deg}
.hero .lead{max-width:50ch;text-wrap:balance;margin:clamp(22px,2.4vw,34px) auto 0}
.hero .ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,2.6vw,36px)}

/* Acts: each one slides over the last with a rounded shoulder */
.act{position:relative;margin-top:calc(-1 * var(--rad));padding:var(--pad) 0 calc(var(--pad) + var(--rad));border-radius:var(--rad) var(--rad) 0 0;scroll-margin-top:0;overflow:hidden}
.act .eyebrow{margin-bottom:22px}
.act .h2{font-size:clamp(2.5rem,7vw,7rem);font-weight:800;line-height:.92;letter-spacing:-.045em;word-spacing:.04em}
.act .h2 em{letter-spacing:-.03em}
.act .sub{margin-top:clamp(18px,2vw,28px);font-size:clamp(1.05rem,1.45vw,1.3rem)}
.js [data-rise]{opacity:0;translate:0 28px;transition:opacity .8s var(--ease-out),translate .8s var(--ease-out)}
.js [data-rise].in{opacity:1;translate:none}

/* A Tuesday: the noise, at full volume */
.tue{background:var(--tint);color:var(--ink);text-align:center}
.tue .head{max-width:none}
.tue .h2 em{color:var(--purple-text)}
.tue .sub{max-width:none;color:var(--ink);opacity:.82}
.tracks{display:grid;gap:14px;width:112%;margin:clamp(44px,6vw,88px) 0 0 -6%;rotate:-3deg}
.track{display:flex;gap:14px;width:max-content;animation:slide 70s linear infinite}
.track.rev{animation-direction:reverse;animation-duration:84s}
.track:last-child{animation-duration:96s}
@keyframes slide{to{transform:translateX(-50%)}}
.msg{display:inline-flex;align-items:center;gap:10px;padding:clamp(12px,1.3vw,18px) clamp(18px,1.9vw,28px);border-radius:24px;border-bottom-left-radius:6px;background:var(--paper);color:var(--ink);font-size:clamp(1.05rem,1.6vw,1.5rem);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.msg i{font-size:1.1em;color:var(--purple-text)}
.msg.me{border-bottom-left-radius:24px;border-bottom-right-radius:6px;background:var(--yellow)}
.msg.them{background:var(--ink);color:var(--paper)}
.msg.them i{color:var(--yellow)}

/* How it works: a ledger of three rows, each with the object it produces */
.how{background:var(--paper)}
.how .head{max-width:980px}
.how .h2 em{color:var(--purple-text)}
.steps{list-style:none;margin-top:clamp(48px,6vw,88px);border-top:1.5px solid var(--ink)}
.steps>li{display:grid;grid-template-columns:minmax(56px,1fr) minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(28px,4.4vw,64px) 0;border-bottom:1.5px solid var(--ink)}
.steps .n{align-self:start;padding-top:.7em;font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--purple-text)}
.steps .h3{font-size:clamp(1.7rem,3.4vw,3.1rem);font-weight:700;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.steps p{margin-top:14px;max-width:42ch;font-size:1.08rem;color:var(--muted)}
.art{display:flex;flex-direction:column;align-items:flex-start;gap:10px;justify-self:end;width:min(100%,340px)}
.art .msg{font-size:1.05rem;padding:13px 20px;background:var(--surface)}
.art .msg.me{align-self:flex-end;background:var(--tint)}
.wave-a{display:flex;align-items:center;gap:3px;height:18px}
.wave-a b{display:block;width:3px;height:var(--h);border-radius:2px;background:var(--purple-text)}
.slip{position:relative;width:100%;padding:20px 22px 22px;border-radius:var(--slip);background:var(--yellow);rotate:2deg}
.slip .t{display:flex;align-items:center;gap:8px;font-family:var(--hand);font-style:italic;font-weight:700;font-size:1.5rem;line-height:1}
.slip ul{list-style:none;display:grid;gap:6px;margin-top:12px;font-weight:600;font-size:.98rem}
.slip li{display:flex;gap:10px;padding-top:6px;border-top:1.5px dashed rgba(12,10,29,.35)}
.slip li span{min-width:56px;font-weight:500;opacity:.65}
.slip li em{font-style:normal}
.note{display:inline-block;padding:3px 12px;border-radius:var(--slip);background:var(--paper);color:var(--ink);font-family:var(--hand);font-style:italic;font-weight:600;rotate:-2deg}
.slip .note{position:absolute;right:-10px;bottom:-14px;box-shadow:0 0 0 1.5px var(--ink)}
.confirm{display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 26px 0 10px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;font-size:1.1rem}
.confirm .who{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green);color:var(--ink);font-size:.95rem}
.stamp{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;font-family:var(--hand);font-style:italic;font-weight:700;font-size:1.6rem;line-height:1;color:var(--purple-text);rotate:-4deg}

/* Results: the same day, twice */
.res{background:var(--paper);color:var(--ink)}
.res .sub{color:var(--ink);opacity:.78}
.compare{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:14px;margin-top:clamp(44px,5.5vw,80px)}
.cmp{padding:clamp(22px,2.6vw,36px);border-radius:clamp(22px,2.6vw,36px)}
.cmp .eyebrow{margin-bottom:0}
.cmp.a{border:1.5px solid var(--ink)}
.pile{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pile .msg{font-size:.98rem;padding:10px 16px;border-radius:18px;border-bottom-left-radius:5px;white-space:normal}
.pile .msg.me{border-bottom-left-radius:18px;border-bottom-right-radius:5px;background:var(--paper)}
.pile .msg.them{background:var(--paper);color:var(--ink)}
.pile .msg.them i{color:var(--purple-text)}
.pile .msg:nth-child(3n+1){rotate:-2deg}
.pile .msg:nth-child(3n+2){rotate:1.5deg;opacity:.72}
.pile .msg:nth-child(4n){rotate:3deg;opacity:.5}
.cmp.b{background:var(--ink);color:var(--paper)}
.cmp.b .eyebrow{color:var(--yellow)}
.ledger{list-style:none;margin-top:18px}
.ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:clamp(18px,2vw,26px) 0;border-top:1px solid rgba(255,255,255,.18)}
.ledger li:first-child{border-top:0}
.ledger .h3{font-size:clamp(1.5rem,2.6vw,2.4rem);font-weight:700;line-height:1;letter-spacing:-.04em}
.ledger p{grid-column:1;max-width:44ch;color:rgba(255,255,255,.66)}
.ledger .note{grid-row:1 / span 2;grid-column:2;font-size:clamp(1.05rem,1.5vw,1.35rem);padding:5px 14px}
.ledger li:nth-child(odd) .note{background:var(--yellow);rotate:2deg}
.ledger .note i{margin-right:6px;font-size:.9em;vertical-align:-.08em}

/* For whom: the list is the layout */
.who{background:var(--tint)}
.who .eyebrow{color:var(--purple-text)}
.who .ln{display:block}
.who .h2 .ln:nth-child(2){font-family:var(--hand);font-style:italic;font-weight:600;letter-spacing:-.03em;color:var(--purple-text)}
.kinds{list-style:none;margin-top:clamp(40px,5vw,76px);font-size:clamp(1.4rem,3.3vw,3rem);font-weight:700;line-height:1.2;letter-spacing:-.04em}
.kinds li{display:inline}
.kinds li:not(:last-child)::after{content:" / ";font-weight:400;color:var(--purple)}
.kinds li:nth-child(3n+2){color:var(--purple-text)}
.who .after{margin-top:clamp(28px,3vw,44px);max-width:44ch;font-size:clamp(1.05rem,1.45vw,1.3rem);font-weight:600}

/* Demo */
.try{background:var(--paper)}
.try .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:start}
.try .eyebrow{color:var(--purple-text)}
.try .sub{max-width:44ch}
.rows{display:grid;gap:0;margin-top:clamp(26px,3vw,40px);border-top:1.5px solid var(--ink)}
.rows button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:12px 4px;border:0;border-bottom:1.5px solid var(--ink);background:none;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.02em;text-align:left;cursor:pointer;transition:padding .25s var(--ease-out),color .16s ease}
.rows button i{font-size:20px;transition:translate .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.rows button:hover{padding-left:14px;color:var(--purple-text)}.rows button:hover i{translate:4px -4px}}
.chat{border-radius:clamp(22px,2.6vw,36px);background:var(--tint);overflow:hidden}
.chat .bar{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--ink);color:var(--paper);font-weight:700;line-height:1.25}
.chat .bar .av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:18px}
.chat .bar small{display:block;font-weight:500;font-size:.82rem;color:rgba(255,255,255,.66)}
.chatlog{display:flex;flex-direction:column;gap:10px;height:380px;overflow:auto;padding:20px}
.chatlog .msg{align-self:flex-start;max-width:84%;padding:12px 16px;border-radius:18px;border-bottom-left-radius:5px;font-size:.98rem;font-weight:500;line-height:1.45;letter-spacing:0;white-space:normal;animation:up .3s var(--ease-out)}
.chatlog .msg.me{align-self:flex-end;border-bottom-left-radius:18px;border-bottom-right-radius:5px;background:var(--ink);color:var(--paper)}
.typing{display:inline-flex;gap:5px;align-items:center;height:1.2em}
.typing i{display:block;width:7px;height:7px;border-radius:50%;background:var(--ink);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat form{display:flex;gap:8px;padding:12px}
.chat input{flex:1;min-width:0;height:50px;padding:0 20px;border:0;border-radius:999px;background:var(--paper)}
.chat input::placeholder{color:var(--muted)}
.chat .send{height:50px;padding:0 22px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;cursor:pointer;transition:transform .16s var(--ease-out),background-color .16s ease}
.chat .send:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.chat .send:hover{background:var(--purple-text)}}

/* Pilot: the page ends where it began, on the monster */
.join{background:var(--tint);color:var(--ink);padding-bottom:0;--focus:var(--yellow)}
.join .cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);align-items:end}
.join .yellow{padding:.02em .16em .1em;border-radius:.2em;background:var(--yellow);rotate:-3deg}
.join form{display:grid;gap:10px;max-width:560px;margin-top:clamp(28px,3.4vw,48px)}
.join label{font-weight:600}
.join .jrow{display:flex;gap:10px;flex-wrap:wrap}
.join input{flex:1;min-width:220px;height:56px;padding:0 22px;border:0;border-radius:999px;background:var(--paper);color:var(--ink)}
.join input::placeholder{color:var(--muted)}
.join .btn.primary{height:56px;background:var(--yellow);color:var(--ink)}
@media(hover:hover) and (pointer:fine){.join .btn.primary:hover{background:var(--green)}}
.join .jnote{font-size:.9rem;opacity:.7}
.join .ok{min-height:1.5em;font-weight:700;color:var(--yellow)}
.pilot .eyebrow{margin-bottom:14px;color:var(--yellow)}
.pilot p{color:rgba(255,255,255,.72)}
.pilot ul{list-style:none;margin-top:18px}
.pilot li{display:flex;gap:10px;align-items:center;padding:13px 0;border-top:1px solid rgba(255,255,255,.18);font-weight:600}
.pilot li i{font-size:18px;color:var(--yellow)}
.giant{width:min(1180px,calc(100% - 48px));margin:clamp(72px,10vw,150px) auto 0}
.join footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,5vw,72px);padding:26px 0 30px;border-top:1px solid rgba(12,10,29,.14);font-size:.92rem;color:rgba(12,10,29,.62)}
.join footer>div{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.join footer a{font-weight:600;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.join footer a:hover{text-decoration:underline;text-underline-offset:3px}}

@media(max-width:860px){
  .steps>li{grid-template-columns:1fr;gap:14px}
  .steps .n{padding-top:0}
  .art{justify-self:start;margin-top:12px}
  .compare,.try .wrap,.join .cols{grid-template-columns:1fr}
  .chatlog{height:320px}
  .tracks{rotate:-4deg}
}
@media(max-width:560px){
  .nav .wrap{padding-left:16px}
  .language-trigger{padding:0 8px 0 10px}
  .ledger li{grid-template-columns:1fr}
  .ledger .note{grid-row:auto;grid-column:1;justify-self:start;margin-top:8px}
  .slip .note{right:6px}
  .giant{width:calc(100% - 32px)}
}
@media(prefers-reduced-motion:reduce){
  .hero .copy>*,.hero h1 .w{animation:none;opacity:1}
  .machine .livelogo{animation:none}
  .js [data-rise]{opacity:1;translate:none;transition:none}
  .tracks{width:auto;margin-inline:0;rotate:none}
  .track{justify-content:center}
}