/* Inner pages (Oct 15): use case pages, Book a demo, Sign in. Same tokens, top bar, closing card and footer as the homepage. */
:root{--ease:cubic-bezier(.22,1,.36,1);--charcoal:#121614;--nav-h:84px;--mint:#B0E1B6;--green:#121614}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"General Sans",system-ui,sans-serif;background:#F7F7F5;color:#121614;-webkit-font-smoothing:antialiased}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
img{display:block;max-width:100%}
.wrap{max-width:var(--container);margin:0 auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:#fff;color:#121614;padding:8px 12px}

/* top bar: as on the homepage; dark over the dark hero, light glass once the page turns light (pages.js) */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--nav-edge);background:rgba(18,22,20,.86);backdrop-filter:blur(12px);transition:background .5s var(--ease)}
.bar a{color:#F7F7F5;text-decoration:none;transition:color .3s var(--ease),opacity .2s var(--ease)}
.logo{display:block;width:140px;height:30px;background:url(/assets/korravo-logo-horizontal-small-mark-on-dark.svg) left center/contain no-repeat}
.bar nav{display:flex;gap:42px;font-size:16px;font-weight:500}
.bar .right{display:flex;align-items:center;gap:22px;font-size:16px;font-weight:500}
/* Oct 20: between the menu breakpoint and 1200 px the bar ran out of room and links wrapped onto two lines (84 px tall at 1024); tighter gaps and 15 px there, and links never wrap */
.bar nav a,.bar .right>a{white-space:nowrap}
@media(min-width:1011px) and (max-width:1199px){.bar nav{gap:24px;font-size:15px}.bar .right{gap:18px;font-size:15px}}
.bar nav a,.bar .right>a:not(.btn){position:relative;opacity:.86}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:#B0E1B6;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.bar nav a:hover,.bar .right>a:not(.btn):hover{opacity:1}
.bar nav a:hover::after,.bar nav a[aria-current]::after{transform:scaleX(1)}
.bar.light{background:rgba(247,247,245,.86);box-shadow:inset 0 -1px 0 rgba(18,22,20,.06)}
.bar.light a{color:#121614}
.bar.light .logo{background-image:url(/assets/korravo-logo-horizontal-small-mark-on-light.svg)}
.bar.light nav a::after{background:#121614}
.bar.light .btn{background:#121614;color:#F7F7F5!important}.bar.light .btn:hover{background:#2A302C;box-shadow:none}
.btn{text-decoration:none;display:inline-flex;align-items:center;gap:10px;background:#B0E1B6;color:var(--charcoal)!important;padding:13px 16px;font-weight:500;font-size:16px;border:0;cursor:pointer;font-family:inherit;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:#C9EDCB;box-shadow:none}
.btn .arw,.tlink .arw{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arw,.tlink:hover .arw,.bar .right>a:hover .arw{transform:translate(2px,-2px)}
@media(max-width:1010px){.bar nav{display:none}}
@media(max-width:760px){.logo{width:118px;height:26px}.bar .right>a:not(.btn){display:none}.bar .btn{padding:10px 13px;font-size:14px;gap:8px;white-space:nowrap}}

/* ---------- use case hero: dark, copy left, the team photo right in the logo's square frame ---------- */
.up-hero{background:#121614;color:#F7F7F5;padding:calc(var(--nav-h) + clamp(40px,5vw,72px)) var(--gutter) clamp(72px,8vw,120px);position:relative;overflow:hidden;isolation:isolate}
.up-hero::before{content:"";position:absolute;right:-10%;top:10%;width:70%;height:90%;z-index:-1;background:radial-gradient(closest-side,rgba(103,184,115,.16),transparent);filter:blur(30px)}
.up-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.up-hero h1{font-size:clamp(44px,5.4vw,80px);line-height:1.02;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
@keyframes up-draw{to{stroke-dashoffset:0}}
@keyframes up-pop{to{transform:none}}
/* entrance */
@keyframes up-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.up-hero *,.up-art,.up-art *{animation:none!important}}
@media(max-width:1000px){.up-hero .wrap,.up-context .wrap,.up-head{grid-template-columns:1fr}}

/* ---------- form pages: Book a demo, Sign in, thanks ---------- */
.fp{padding:calc(var(--nav-h) + clamp(48px,6vw,96px)) var(--gutter) var(--section-y)}
.fp .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.fp h1{font-size:clamp(44px,5vw,72px);line-height:1.04;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.fp h1 span{color:var(--green)}
.fp .lede{font-size:var(--lead);line-height:1.6;color:#474D49;margin-top:24px;max-width:30em}
.fp-hp{position:absolute;left:-9999px}
.fp-simple{max-width:720px;margin:0 auto;text-align:left;min-height:46vh}
.fp-simple .btn{margin-top:32px}
.fp-simple .alt{margin-top:24px;font-size:var(--body);color:#474D49}
.fp-simple .alt a{color:var(--green)}
@media(max-width:900px){.fp .wrap{grid-template-columns:1fr}}