/* =========================================================================
   Yellowdesk — public site. Prototype build.
   Brand tokens lifted verbatim from the app (src/app/globals.css):
   IBM Plex Sans, burnt orange #cf5c36, pure ink on white, and border-radius: 0
   everywhere. Structure is done with rules and whitespace, never elevation.
   ========================================================================= */

:root{
  --canvas:#ffffff;
  --ink:#000000;
  --accent:#cf5c36;        /* bright accent: bars, rules, marks, focus */
  --accent-deep:#b04a28;    /* accent as text on white, and fill under white text */
  --accent-soft:#efc88b;    /* the accent's companion */
  --muted:#7c7c7c;
  --muted-text:#6e6e6e;
  --border:#e5e5e5;
  --fill-hover:#f5f5f5;
  --paper:#fbfaf8;          /* one very faint warm off-white, used sparingly */
  --danger:#b3261e;
  --success:#1f7a4c;
  --band-cold:#c9c9c9;
  --band-possible:#efc88b;
  --band-likely:#e09a5f;
  --band-strong:#cf5c36;
  --maxw:1360px;
  --pad:clamp(20px,5vw,72px);
  --eyebrow:0.14em;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--canvas);color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---- shared layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
/* Eyebrows removed site-wide: the all-caps kicker above titles reads as a template. */
.eyebrow{display:none}
/* The "New" tag now rides inline with the heading instead of an eyebrow. */
.h-new{display:inline-block;vertical-align:middle;margin-left:12px;transform:translateY(-4px)}
.tag-new{
  font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent-deep);border:1px solid var(--accent-soft);
  padding:2px 6px;margin-left:2px;
}
h1,h2,h3{font-weight:600;letter-spacing:-0.02em;line-height:1.04}
.h-display{font-size:clamp(2.35rem,5.4vw,4.15rem)}
.h-sec{font-size:clamp(1.8rem,3.6vw,2.85rem);line-height:1.06}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted-text);line-height:1.5;font-weight:400}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;font-size:15px;font-weight:500;white-space:nowrap;
  border:1px solid transparent;transition:transform .06s linear,background .12s linear,border-color .12s linear;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:#262626}
.btn--accent{background:var(--accent-deep);color:#fff}
.btn--accent:hover{background:#9c4023}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--border)}
.btn--ghost:hover{background:var(--fill-hover)}
.btn--sm{height:40px;padding:0 16px;font-size:14px}
.btn--ondark{background:#fff;color:var(--ink)}
.btn--ondark:hover{background:#ededed}
.btn--ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn--ghost-dark:hover{background:rgba(255,255,255,.1)}
.arrow{width:16px;height:16px;flex:none}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--border)}
.nav__row{display:flex;align-items:center;gap:28px;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.brand{display:flex;align-items:center}
/* Lockup is the petal mark + "Yellowdesk" in Proxima Nova Semibold, outlined
   (assets/img/brand/logo.svg, 1819x281). Height drives the mark; the wordmark
   and gap scale with it, so size by height only and let width follow. */
.brand__logo{height:22px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:6px}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:5px;height:64px;padding:0 12px;font-size:15px;color:var(--ink)}
.nav__link:hover{color:var(--accent-deep)}
.nav__link .chev{width:14px;height:14px;transition:transform .16s ease;color:var(--muted)}
.nav__item.open .chev{transform:rotate(180deg)}
.nav__eu{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-text);padding:0 6px;white-space:nowrap}
.nav__eu svg{width:17px;height:17px;color:var(--accent-deep)}
.nav__spacer{margin-left:auto}
.nav__right{display:flex;align-items:center;gap:8px}
.nav__login{font-size:15px;padding:0 12px;height:40px;display:inline-flex;align-items:center}
.nav__login:hover{color:var(--accent-deep)}

/* language switcher */
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;font-size:14px;color:var(--ink);border:1px solid transparent}
.lang__btn:hover{background:var(--fill-hover)}
.lang__btn svg{width:16px;height:16px;color:var(--muted)}
.lang__menu{position:absolute;right:0;top:52px;background:#fff;border:1px solid var(--border);min-width:168px;padding:6px;display:none;box-shadow:0 12px 34px -18px rgba(0,0,0,.4)}
.lang.open .lang__menu{display:block}
.lang__opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:9px 10px;font-size:14px}
.lang__opt:hover{background:var(--fill-hover)}
.lang__opt[aria-current="true"]{color:var(--accent-deep);font-weight:500}
.lang__opt[aria-current="true"] .tick{opacity:1}
.lang__opt .tick{width:15px;height:15px;opacity:0;color:var(--accent)}
.lang__sub{font-size:12px;color:var(--muted-text)}

/* mega menu */
/* The panel opens from the Product item's left edge, so the room it has is the viewport MINUS
   how far in that item sits (~205px at the narrowest desktop, ~275px at the widest), not the
   page gutter. Budgeting only 48px let it hang off the right edge on any window between the
   mobile breakpoint and ~930px. 300px covers the item plus a gutter, and at >=1024 the 720
   still wins, so nothing changes on a normal desktop. */
.mega{position:absolute;left:0;top:calc(100% + 1px);transform:translateY(6px);
  width:min(720px,calc(100vw - 300px));background:#fff;border:1px solid var(--border);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:70}
.nav__item.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mega__col{padding:22px 24px}
.mega__col+.mega__col{border-left:1px solid var(--border)}
.mega__h{font-size:11px;font-weight:500;letter-spacing:var(--eyebrow);text-transform:uppercase;color:var(--muted-text);margin-bottom:14px}
.mega__link{display:flex;gap:12px;padding:9px 8px;margin:0 -8px;align-items:flex-start}
.mega__link:hover{background:var(--fill-hover)}
.mega__ic{width:34px;height:34px;flex:none;border:1px solid var(--border);display:grid;place-items:center;color:var(--accent-deep)}
.mega__ic svg{width:17px;height:17px}
.mega__t{font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:7px}
.mega__d{font-size:12.5px;color:var(--muted-text);line-height:1.4}
.mega__foot{grid-column:1/-1;border-top:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;background:var(--paper)}
.mega__foot a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--accent-deep)}
.mega__foot .muted{color:var(--muted-text);font-weight:400;font-size:13px}

/* mobile nav */
.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-left:auto}
.nav__burger svg{width:24px;height:24px}
.mnav{display:none;position:fixed;inset:64px 0 0;background:#fff;z-index:55;overflow-y:auto;padding:8px var(--pad) 40px;border-top:1px solid var(--border)}
.mnav.open{display:block}
.mnav__group{border-bottom:1px solid var(--border);padding:6px 0}
.mnav__h{font-size:11px;font-weight:500;letter-spacing:var(--eyebrow);text-transform:uppercase;color:var(--muted-text);padding:16px 0 8px}
.mnav__link{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:17px}
.mnav__link .tag-new{margin-left:0}
.mnav__cta{display:grid;gap:10px;margin-top:22px}
.mnav__cta .btn{width:100%;height:52px}
.mnav__langrow{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 4px}
.mnav__langbtn{border:1px solid var(--border);padding:9px 14px;font-size:14px;color:var(--ink)}
.mnav__langbtn[aria-current="true"]{border-color:var(--accent);color:var(--accent-deep);font-weight:500}
.mnav__promise{font-size:13px;color:var(--muted-text);margin-top:4px;text-align:center}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,5vw,64px);position:relative;overflow:hidden}
/* The photo rests on a sharp, flat sand panel: the hero's whole background treatment.
   Flat and warm, no gradient blobs. */
.hero__media::before{content:"";position:absolute;top:26px;left:34px;right:-30px;bottom:-26px;
  background:var(--accent-soft);z-index:-1}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(28px,4vw,52px);align-items:center}
.hero__copy{max-width:730px}
.hero h1{margin:20px 0 0}
.hero h1 .u{background:linear-gradient(transparent 66%,var(--accent-soft) 66%);padding:0 .04em}
.hero__sub{margin-top:22px;max-width:540px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__promise{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13.5px;color:var(--muted-text)}
.hero__promise svg{width:17px;height:17px;color:var(--accent-deep);flex:none}
.hero__reassure{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:34px;align-items:center}
.reassure{display:flex;align-items:center;gap:10px}
.reassure__stars{display:flex;gap:2px;color:var(--accent)}
.reassure__stars svg{width:16px;height:16px}
.reassure__txt{font-size:13.5px;line-height:1.3}
.reassure__txt b{font-weight:600}
.reassure__txt span{color:var(--muted-text);display:block}
.reassure__sep{width:1px;height:30px;background:var(--border)}
.euflag{width:24px;height:16px;display:block}
.eu-mark{flex:none;display:inline-flex;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.reassure--eu{gap:10px}
.reassure__eu{font-size:13.5px;font-weight:600}
/* ---- the hero on a phone ----
   Two things go wrong at 390px and they go wrong for BOTH backgrounds, so they are fixed here
   once rather than per variant. */
@media (max-width:680px){
  /* 1. The rating label wraps to three lines on a narrow screen, and a vertically-centred icon
        then floats against the middle of the block instead of sitting with the line it labels.
        Both icons align to the first line and get a hair of optical offset. */
  .hero__reassure{flex-direction:column;align-items:flex-start;gap:14px;margin-top:28px}
  .reassure{align-items:flex-start}
  .reassure__stars,.reassure--eu .euhost{margin-top:2px}
  /* 2. The sand panel the photo rests on is offset for a 420px desktop portrait; at 350px those
        same offsets read as a stray slab hanging off the bottom-right. Scaled to the photo. */
  .hero__media::before{top:14px;left:18px;right:-12px;bottom:-14px}
}

/* hero portrait + signature gauge overlap */
.hero__media{position:relative}
.hero__photo{position:relative;border:1px solid var(--border);overflow:hidden;aspect-ratio:4/4.7;background:var(--paper)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero__badge{position:absolute;left:-18px;bottom:26px;background:#fff;border:1px solid var(--border);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.45);width:210px;padding:14px 15px}
.hero__caption{position:absolute;right:-10px;top:22px;background:var(--ink);color:#fff;font-size:12px;padding:8px 11px;max-width:190px;line-height:1.35}
.hero__caption b{color:var(--accent-soft);font-weight:600}

/* the buying-signal gauge (the product's signature artifact) */
.gauge__label{font-size:10.5px;font-weight:500;letter-spacing:var(--eyebrow);text-transform:uppercase;color:var(--muted-text)}
.gauge__topline{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.gauge__num{font-size:40px;line-height:.98;font-weight:600;margin-top:3px}
.chip{font-size:12px;font-weight:500;padding:3px 9px;white-space:nowrap;align-self:flex-start;margin-top:4px}
.chip--cold{background:var(--band-cold);color:#000}
.chip--possible{background:var(--band-possible);color:#000}
.chip--likely{background:var(--band-likely);color:#000}
.chip--strong{background:var(--accent-deep);color:#fff}
.gauge__track{position:relative;height:9px;margin-top:12px;display:flex}
.gauge__track span.z{flex:1;height:100%}
.z-cold{background:var(--band-cold)}.z-possible{background:var(--band-possible)}
.z-likely{background:var(--band-likely)}.z-strong{background:var(--band-strong)}
.gauge__marker{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ink);outline:2px solid #fff;transform:translateX(-50%);transition:left 1s cubic-bezier(.2,.7,.2,1)}
.gauge__scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted-text);margin-top:6px}

/* =========================================================================
   PRODUCT DEMO — spott.io-style. A fixed-size window that emulates the full
   app and auto-loops the five surfaces, animating each core flow.
   ========================================================================= */
.demo-sec{padding:clamp(26px,3.5vw,48px) 0 clamp(44px,6vw,84px)}

/* the tab strip */
/* `hidden` has to win. The scenes, the rail icons and the tabs all set a display of their
   own, and an author `display` beats the browser's [hidden] rule without this. */
[hidden]{display:none!important}
.demo__tabs{display:flex;border:1px solid var(--border);border-bottom:none;background:var(--paper)}
.demo__tab{position:relative;flex:1;padding:14px 16px 15px;text-align:left;color:var(--muted-text);
  border-right:1px solid var(--border);font-size:14px;font-weight:500;letter-spacing:-.01em;
  transition:color .15s,background .15s;overflow:hidden;white-space:nowrap}
.demo__tab:last-child{border-right:none}
.demo__tab[aria-selected="true"]{background:#fff;color:var(--ink)}
.demo__tab:hover{color:var(--ink)}
.demo__prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent)}
.demo__tab[aria-selected="true"].run .demo__prog{animation:demofill var(--dur,6000ms) linear forwards}
@keyframes demofill{from{width:0}to{width:100%}}

/* the window */
.demo{position:relative;display:flex;border:1px solid var(--border);background:#fff;
  height:clamp(430px,45vw,556px);overflow:hidden;box-shadow:0 44px 90px -56px rgba(0,0,0,.5)}
.demo,.demo *{cursor:default!important;-webkit-user-select:none;user-select:none}

/* left rail (the app's menu) */
.demo__rail{width:54px;flex:none;border-right:1px solid var(--border);background:var(--paper);
  display:flex;flex-direction:column;align-items:center;padding:12px 0}
.demo__brand{width:28px;height:28px;border:1.6px solid var(--ink);display:grid;place-items:center;font-weight:600;font-size:15px;margin-bottom:12px}
.demo__ic{position:relative;width:40px;height:40px;display:grid;place-items:center;color:var(--muted);margin:2px 0;transition:color .2s}
.demo__ic svg{width:19px;height:19px}
.demo__ic.on{color:var(--accent-deep)}
.demo__ic.on::before{content:"";position:absolute;left:-7px;top:9px;bottom:9px;width:2px;background:var(--accent)}
.demo__railcredit{margin-top:auto;text-align:center;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-text);line-height:1.3}
.demo__railcredit b{display:block;font-size:13px;letter-spacing:0;color:var(--ink)}

/* the view + scenes */
.demo__view{position:relative;flex:1;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .45s ease}
.scene.active{opacity:1;visibility:visible}

.scene__bar{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-bottom:1px solid var(--border);flex:none}
.scene__title{font-weight:500;font-size:14px;white-space:nowrap}
.scene__count{font-size:12.5px;color:var(--muted-text);opacity:0;transition:opacity .4s}
.scene.listed .scene__count,.scene.opened .scene__count,.scene.revealed .scene__count{opacity:1}
.scene__count b{color:var(--accent-deep);font-weight:500}
.scene__search{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--border);
  padding:0 11px;height:32px;min-width:230px;font-size:12.5px;color:var(--ink);background:#fff}
.scene__search svg{width:14px;height:14px;color:var(--muted);flex:none}
.q__txt{white-space:nowrap;overflow:hidden}
.q__caret{width:1.5px;height:15px;background:var(--accent);opacity:0;flex:none}
.scene.typing .q__caret{opacity:1;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.scene__list{flex:1;overflow:hidden;transition:margin-right .5s cubic-bezier(.2,.7,.2,1)}
/* when the detail opens, the list gives up width instead of being covered mid-word */
.scene.opened .scene__list{margin-right:46%}
/* Candidate match also carries the CV pane, so the list has 220px less to give and the
   client column ends up sliced. It drops instead, exactly as it does on a narrow screen. */
.scene[data-scene="1"].opened .demo-grid .hide-xs{display:none}
.demo-grid{width:100%;border-collapse:collapse}
.demo-grid th{font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-text);text-align:left;padding:9px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
.demo-grid td{padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px;white-space:nowrap}
.demo-grid tbody .row{opacity:0;transform:translateY(7px);transition:opacity .4s ease,transform .4s ease}
.scene.listed .demo-grid tbody .row,.scene.opened .demo-grid tbody .row,.scene.revealed .demo-grid tbody .row{opacity:1;transform:none}
/* The list now runs the full height of the window, so the stagger has to reach the bottom
   row. Written out because a transition-delay cannot be computed from nth-child. */
.demo-grid .row:nth-child(1){transition-delay:.03s}
.demo-grid .row:nth-child(2){transition-delay:.07s}
.demo-grid .row:nth-child(3){transition-delay:.11s}
.demo-grid .row:nth-child(4){transition-delay:.15s}
.demo-grid .row:nth-child(5){transition-delay:.19s}
.demo-grid .row:nth-child(6){transition-delay:.23s}
.demo-grid .row:nth-child(7){transition-delay:.27s}
.demo-grid .row:nth-child(8){transition-delay:.31s}
.demo-grid .row:nth-child(9){transition-delay:.35s}
.demo-grid .row:nth-child(10){transition-delay:.39s}
.demo-grid .row:nth-child(11){transition-delay:.43s}
.demo-grid .row:nth-child(12){transition-delay:.47s}
.demo-grid .row:nth-child(13){transition-delay:.51s}
.scene.opened .demo-grid .row.lead,.scene.revealed .demo-grid .row.lead{background:linear-gradient(90deg,rgba(239,200,139,.3),rgba(239,200,139,.05))}
.scene.opened .demo-grid .row.lead td:first-child,.scene.revealed .demo-grid .row.lead td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.demo-grid .c-company{color:var(--accent-deep)}
.demo-grid .rt{text-align:right}
.demo-grid .muted{color:var(--muted-text)}

/* the sliding detail pane */
.scene__detail{position:absolute;top:48px;right:0;bottom:0;width:46%;min-width:248px;background:#fff;
  border-left:1px solid var(--border);transform:translateX(102%);transition:transform .5s cubic-bezier(.2,.7,.2,1);
  overflow:hidden;box-shadow:-26px 0 44px -32px rgba(0,0,0,.32);display:flex;flex-direction:column}
.scene.opened .scene__detail{transform:translateX(0)}
.sd__head{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-bottom:1px solid var(--border);flex:none}
.sd__back{width:22px;height:22px;flex:none;display:grid;place-items:center;border:1px solid var(--border);color:var(--muted)}
.sd__back svg{width:13px;height:13px}
.sd__htitle{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd__body{padding:14px;overflow:hidden}
.sd__co{font-size:12px;color:var(--muted-text);margin-bottom:13px}
.sd__stat{display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:14px}
.sd__stat .k{color:var(--muted-text)}
.sd__stat .sb{flex:1;max-width:130px}
.sd__lines{display:grid;gap:8px;margin:14px 0 16px}
.sd__line{height:8px;background:var(--fill-hover)}
.sd__cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent-deep);color:#fff;font-size:12.5px;font-weight:500;padding:9px 13px}
.sd__cta svg{width:14px;height:14px}

/* candidate-match scene */
.demo-cm{flex:1;display:grid;grid-template-columns:210px 1fr;overflow:hidden}
.demo-cm .cm__cv{border-right:1px solid var(--border);padding:16px;background:var(--paper)}
.demo-cm .cm__file{opacity:0;transform:translateY(-10px);transition:opacity .45s ease,transform .45s ease}
.scene.cv .cm__file,.scene.listed .cm__file,.scene.opened .cm__file{opacity:1;transform:none}
.demo-cm .cm__skills{opacity:0;transition:opacity .45s ease .12s}
.scene.cv .cm__skills,.scene.listed .cm__skills,.scene.opened .cm__skills{opacity:1}

/* contact-enrichment reveal — scoped to scene 4's lead so other revealed
   contacts (and the feature sections) keep their emails visible. */
.scene[data-scene="4"] .person.lead .done{display:none}
.scene[data-scene="4"].revealed .person.lead .reveal{display:none}
.scene[data-scene="4"].revealed .person.lead .done{display:inline-flex}
.scene[data-scene="4"].revealed .person.lead{background:linear-gradient(90deg,rgba(239,200,139,.22),transparent);margin:0 -14px;padding:10px 14px}

@media (prefers-reduced-motion:reduce){
  /* Reduce MOTION (no sliding across the screen), but the tour still plays: scenes
     cross-fade, rows fade in, the detail fades instead of sliding, and the progress
     and upload bars keep their small functional fills. A blank tour is worse. */
  .demo-grid tbody .row{transform:none}
  .scene__detail{transform:none;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
  .scene.opened .scene__detail{opacity:1;visibility:visible}
  .q__caret{animation:none;opacity:0}
  /* The decision makers still open, and the pane still ends up on them: it fades and
     jumps rather than travelling. */
  .dm__row{transform:none}
  .dm__btn .chev,.scene.revealed .dm__btn .chev{transition:none}
  .scene.revealed .dm__btn{animation:none}
  .scene[data-scene="2"] .sd__body,
  .scene[data-scene="4"] .sd__body{transition:none}
  /* The conversation still plays: it just arrives rather than types and slides. */
  .gpt__row--u,.gpt__list li{transform:none}
  .gpt__caret{animation:none;opacity:0}
  .gpt__dot{animation:none;opacity:.5}
}

/* a progress bar under every tab; the active one fills */
.demo__tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--border)}
.demo__prog{z-index:1}

/* rail: user chip replaces the credit counter */
.demo__user{margin-top:auto;width:30px;height:30px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)}
.demo__user svg{width:18px;height:18px}

/* sort control in a scene bar */
.scene__sort{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted-text);border:1px solid var(--border);padding:0 10px;height:30px;white-space:nowrap}
.scene__sort b{color:var(--ink);font-weight:500}
.scene__sort svg{width:13px;height:13px;color:var(--muted)}

/* detail pane: real record overview */
.sd__scroll{flex:1;overflow:hidden}
.sd__meta{display:flex;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted-text);margin-bottom:13px}
.sd__link{color:var(--accent-deep);font-weight:500}
.sd__metasep{width:1px;height:11px;background:var(--border);margin:0 9px;display:inline-block}
.sd__gauge{border:1px solid var(--border);padding:12px 13px}
.brk{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.brk__row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.brk__row dt{color:var(--muted-text)}
.brk__row dd{font-weight:500}
.sd__body .sd__cta{margin:14px 0 2px}
.sd__attrs{margin-top:14px;border-top:1px solid var(--border)}
.sd__attr{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.sd__attr dt{color:var(--muted-text)}
.sd__attr dd{font-weight:500;text-align:right}
.sd__sec{margin-top:16px}
.sd__h{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-text);margin-bottom:9px}
.sd__p{font-size:12.5px;color:var(--muted-text);line-height:1.5}
.sd__chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-o{border:1px solid var(--border);padding:4px 8px;font-size:12px;color:var(--ink)}
.sd__role{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.sd__role .sb{width:104px;flex:none}
.sd__rolen{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd__matchrow{display:flex;align-items:center;gap:12px;margin:12px 0}
.sd__matchk{font-size:12px;color:var(--muted-text)}
.sd__matchrow .match__v{color:var(--accent-deep)}
.sd__matchrow .match__fill{background:var(--accent)}

/* agency collaboration evidence */
.collab{border:1px solid var(--accent-soft);background:linear-gradient(rgba(239,200,139,.14),rgba(239,200,139,.03));padding:12px 13px}
.collab__tag{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:9px}
.collab__row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.5px}
.collab__k{color:var(--muted-text)}
.collab__v{font-weight:600}

/* candidate match: upload -> parse -> list */
.cm2{flex:1;display:grid;grid-template-columns:220px 1fr;overflow:hidden}
.cm2__cv{border-right:1px solid var(--border);background:var(--paper);position:relative;overflow:hidden}
.up{height:100%;display:flex;align-items:center;justify-content:center;padding:16px}
.scene.listed .up,.scene.opened .up{display:none}
.up__zone{width:100%;max-width:250px;border:1.5px dashed var(--muted);padding:22px 16px;text-align:center;background:#fff}
.up__ic{width:28px;height:28px;color:var(--muted);margin:0 auto 10px;display:block}
.up__hint{font-size:13px;color:var(--muted-text)}
.up__file{display:none;margin-top:14px;border:1px solid var(--border);background:#fff;padding:9px 10px;text-align:left}
.scene.uploading .up__file{display:block}
.up__file svg{width:15px;height:15px;color:var(--accent-deep);vertical-align:-2px;margin-right:7px}
.up__fn{font-size:12px}
.up__bar{height:3px;background:var(--border);margin-top:9px;overflow:hidden}
.up__fill{display:block;height:100%;width:0;background:var(--accent)}
.scene.uploading .up__fill{width:100%;transition:width 0.8s linear .05s}
.cv2{display:none;padding:16px}
.scene.listed .cv2,.scene.opened .cv2{display:block}
.cv2__file{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);background:#fff;padding:11px}

/* contact enrichment: the decision makers, opened inline on the company record.
   No credits anywhere: the datapoints are simply there. */
.dm__btn .chev{margin-left:auto;transition:transform .25s ease}
.scene.revealed .dm__btn .chev{transform:rotate(180deg)}
.dm__btn{width:100%;justify-content:flex-start}
/* the press. It is the click the scene is about, so it has to be visible. */
.scene.revealed .dm__btn{animation:dmpress .3s ease}
@keyframes dmpress{0%{transform:scale(1)}45%{transform:scale(.975);background:var(--accent)}100%{transform:scale(1)}}

.dm{margin-top:12px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.scene.revealed .dm{opacity:1;visibility:visible}
.dm__row{padding:11px 0;border-top:1px solid var(--border);opacity:0;transform:translateY(7px);
  transition:opacity .4s ease,transform .4s ease}
.scene.revealed .dm__row{opacity:1;transform:none}
.scene.revealed .dm__row:nth-child(1){transition-delay:.16s}
.scene.revealed .dm__row:nth-child(2){transition-delay:.26s}
.scene.revealed .dm__row:nth-child(3){transition-delay:.36s}
.scene.revealed .dm__row:nth-child(4){transition-delay:.46s}
.dm__n{font-size:13px;font-weight:500}
.dm__t{font-size:12px;color:var(--muted-text);margin-top:1px}
.dm__d{margin-top:7px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0}
/* The pane travels down, the way a real one would scroll. Both offsets are measured, not
   guessed: each lands the buying-signal gauge exactly off the top edge, so nothing is left
   sliced through the middle. Scene 2 reads down to the open roles; scene 4 to the people. */
.scene[data-scene="2"] .sd__body,
.scene[data-scene="4"] .sd__body{transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.scene[data-scene="2"].revealed .sd__body{transform:translateY(-173px)}
.scene[data-scene="4"].revealed .sd__body{transform:translateY(-173px)}

.dp{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);max-width:100%}
.dp svg{width:14px;height:14px;color:var(--muted);flex:none}
.dp .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp--link{color:var(--accent-deep)}
.dp--link svg{color:var(--accent-deep)}
.dp--link span{text-decoration:underline;text-underline-offset:2px}

/* mobile prompt search — replaces the cramped app-window demo on small screens */
.pdemo{display:none}
.pdemo__label{font-size:12.5px;color:var(--muted-text);margin-bottom:10px}
.pdemo__bar{display:flex;align-items:center;gap:11px;border:1.5px solid var(--ink);background:#fff;padding:15px;min-height:58px}
.pdemo__bar>svg{width:19px;height:19px;color:var(--muted);flex:none}
.pdemo__q{font-size:15px;line-height:1.4;color:var(--ink)}
.pdemo__caret{width:2px;height:19px;background:var(--accent);flex:none;opacity:0}
.pdemo.typing .pdemo__caret{opacity:1;animation:blink 1s steps(1) infinite}
.pdemo__results{margin-top:12px;display:grid;gap:10px}
.pdemo__card{border:1px solid var(--border);background:#fff;padding:14px 15px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.pdemo.show .pdemo__card{opacity:1;transform:none}
.pdemo.show .pdemo__card:nth-child(2){transition-delay:.1s}
.pdemo.show .pdemo__card:nth-child(3){transition-delay:.2s}
.pdemo__cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pdemo__co{font-size:14.5px;font-weight:500}
.pdemo__meta{font-size:12.5px;color:var(--muted-text);margin-top:6px;display:flex;flex-wrap:wrap;align-items:center}
.pdemo__meta b{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.pdemo__card{transform:none}.pdemo__caret{animation:none;opacity:0}}

/* ---- app-frame primitives (shared by demo + feature sections) ---- */
.frame{background:#fff;font-size:13px;color:var(--ink)}
/* Frames read as screenshots: no text selection, no text cursor. */
.frame,.frame *{cursor:default!important;-webkit-user-select:none;user-select:none}
.frame__head{display:flex;align-items:center;gap:12px;height:46px;padding:0 16px;border-bottom:1px solid var(--border)}
.frame__title{font-weight:500;font-size:14px}
.frame__count{color:var(--accent-deep);font-weight:500;font-size:12.5px}
.frame__spacer{margin-left:auto}
.frame__pill{font-size:11px;color:var(--muted-text);border:1px solid var(--border);padding:3px 8px;display:inline-flex;align-items:center;gap:6px}
.frame__pill svg{width:13px;height:13px;color:var(--muted)}
.frame__foot{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-top:1px solid var(--border);color:var(--muted-text);font-size:12px}

/* data grid */
.grid-t{width:100%;border-collapse:collapse}
.grid-t th{font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-text);text-align:left;padding:9px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.grid-t td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.grid-t tr:last-child td{border-bottom:none}
.grid-t tbody tr:hover{background:var(--fill-hover)}
.grid-t tr.sel{background:linear-gradient(90deg,rgba(239,200,139,.28),rgba(239,200,139,.06))}
.grid-t tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.c-company{color:var(--accent-deep)}
.c-strong{font-weight:500}
.c-num{width:1%;white-space:nowrap}
.sb{display:flex;align-items:center;gap:9px;min-width:96px}
.sb__v{font-weight:500;width:20px;text-align:right;flex:none}
.sb__track{height:4px;flex:1;background:var(--border);min-width:34px}
.sb__fill{height:100%;background:var(--ink)}
.muted{color:var(--muted-text)}
.rt{text-align:right}

/* candidate match */
/* minmax(0,1fr), not 1fr: a grid item refuses to go below its min-content, so the table
   grew past the frame's edge instead of the column holding it. The CV pane gives up 24px to
   pay for the client names. */
.cm{display:grid;grid-template-columns:186px minmax(0,1fr);min-height:230px}
/* This frame carries a CV pane as well as a table, so it runs out of room ~880px earlier than
   the others. The client column drops here for the same reason it drops at 560 on the rest:
   below this the table cannot fit, and it would either wrap to three lines or walk out
   through the frame. Scoped to .cm so the job and agency frames keep their columns. */
@media (max-width:1200px){ .cm .hide-s{display:none} }
/* "Supply Chain Planner" needs 127px and the role column was landing on exactly that, so it
   wrapped to two lines by a hair and stood the rows up at 61px. The match bar and the cell
   padding hand back the ~30px that buys the role its single line. */
.cm .grid-t td,.cm .grid-t th{padding-left:10px;padding-right:10px}
.cm .match__track{width:36px}
.cm__cv{border-right:1px solid var(--border);padding:16px;background:var(--paper)}
.cm__file{border:1px solid var(--border);background:#fff;padding:11px;display:flex;gap:10px;align-items:flex-start}
.cm__file svg{width:20px;height:20px;color:var(--accent-deep);flex:none}
.cm__fn{font-size:12.5px;font-weight:500;line-height:1.3}
.cm__meta{font-size:11.5px;color:var(--muted-text);margin-top:2px}
.cm__skills{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.cm__skill{font-size:11px;border:1px solid var(--border);padding:3px 7px;color:var(--muted-text)}
.cm__photo{width:42px;height:52px;object-fit:cover;object-position:50% 18%;flex:none;border:1px solid var(--border)}
/* a hairline separator, in place of the interpunct the brand refuses */
.sep{display:inline-block;width:1px;height:11px;background:currentColor;opacity:.32;vertical-align:-1px;margin:0 9px}
.match{display:flex;align-items:center;gap:8px}
.match__v{font-weight:600;width:34px;color:var(--accent-deep)}
.match__track{height:4px;width:52px;background:var(--border)}
.match__fill{height:100%;background:var(--accent)}

/* company + contacts */
/* The side column holds real addresses now, and a real one is long
   (katharina.brand@nordwind-energie.com). This section promises to show you the e-mail, so
   the column is sized to actually show it rather than ellipsis it away. */
.co{display:grid;grid-template-columns:1fr 296px;min-height:230px}
.co__side .dp{font-size:11px}
.co__side .dp svg{width:13px;height:13px}
.co__main{padding:16px}
.co__name{font-size:16px;font-weight:600}
.co__meta{font-size:12px;color:var(--muted-text);margin-top:3px}
.co__gauge{border:1px solid var(--border);padding:13px 14px;margin-top:14px}
.co__side{border-left:1px solid var(--border);padding:14px}
.co__side h4{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-text);margin-bottom:10px}
.person{padding:10px 0;border-bottom:1px solid var(--border)}
.person:first-of-type{padding-top:0}
.person:last-child{border-bottom:none}
.person__n{font-size:13px;font-weight:500}
.person__t{font-size:11.5px;color:var(--muted-text)}
.person__act{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.reveal{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;border:1px solid var(--border);padding:5px 8px;color:var(--ink);transition:background .12s,border-color .12s}
.reveal:hover{background:var(--fill-hover);border-color:var(--muted)}
.reveal svg.ic{width:13px;height:13px;color:var(--muted)}
.credit{display:inline-flex;align-items:center;gap:3px;color:var(--accent-deep);font-weight:500}
.credit svg{width:12px;height:12px}
.done{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink);background:var(--paper);border:1px solid var(--border);padding:5px 8px}
.done svg{width:13px;height:13px;color:var(--muted)}
.done .cp{color:var(--accent-deep)}

/* ATS integration frame */
/* integrations: the marks alone, no box. Nothing to compete with them, so the only job left
   is to sit them on one baseline and give them room. */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);
  align-items:center;justify-items:center}
.logos__tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
/* Bounded by height, not width, so the two wordmarks land on the same cap height (they are
   near-identical ratios, ~2.65, so both settle around 105px wide) and read as a set. */
.logos__img{max-height:40px;max-width:130px;width:auto;height:auto;object-fit:contain}
.logos__icon{height:34px;width:auto;opacity:.88}
.logos__lbl{font-size:12px;color:var(--muted-text);text-align:center;line-height:1.3}
@media (max-width:560px){
  .logos{grid-template-columns:1fr;gap:30px}
}

/* AI tool frame */
/* ChatGPT, drawn as ChatGPT. Everything here is OpenAI's design language on purpose: the
   values below (#f4f4f4 bubble, 24px bubble radius, #0d0d0d ink, #8f8f8f placeholder, the
   28px composer and its black send button) are theirs, not ours. Deliberately the only
   place on the site with a radius or a system font. */
.gpt{background:#fff;color:#0d0d0d;display:flex;flex-direction:column;min-height:296px;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.gpt__top{display:flex;align-items:center;gap:5px;padding:13px 15px 4px;font-size:14.5px;font-weight:500}
.gpt__top svg{width:13px;height:13px;color:#8f8f8f}
.gpt__thread{flex:1;padding:10px 16px 14px;display:flex;flex-direction:column;gap:15px}
.gpt__row--u{display:flex;justify-content:flex-end;opacity:0;transform:translateY(8px);
  transition:opacity .32s ease,transform .32s ease}
.gpt.sent .gpt__row--u{opacity:1;transform:none}
.gpt__bubble{background:#f4f4f4;border-radius:24px;padding:9px 16px;font-size:13.5px;line-height:1.5;max-width:80%}
.gpt__row--a{display:flex;gap:10px;align-items:flex-start;opacity:0;transition:opacity .3s ease}
.gpt.thinking .gpt__row--a,.gpt.tooled .gpt__row--a{opacity:1}
.gpt__mark{width:21px;height:21px;flex:none;display:grid;place-items:center}
.gpt__mark svg{width:19px;height:19px}
.gpt__turn{flex:1;min-width:0}
/* the thinking dot, while it works */
.gpt__dot{display:none;width:11px;height:11px;border-radius:50%;background:#0d0d0d;
  animation:gptpulse 1.15s ease-in-out infinite}
.gpt.thinking .gpt__dot{display:block}
@keyframes gptpulse{0%,100%{opacity:.22;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}
/* Laid out from the start and revealed with opacity, never display:none — the row has to hold
   its space or the frame changes height mid-conversation and the whole section jumps. */
.gpt__tool{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#5d5d5d;
  margin-bottom:8px;opacity:0;transition:opacity .3s ease}
.gpt.tooled .gpt__tool{opacity:1}
.gpt__tool svg{width:13px;height:13px;color:#8f8f8f}
.gpt__tn{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:#5d5d5d}
.gpt__p{font-size:13.5px;line-height:1.7;margin:0 0 8px}
.gpt__list{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7}
.gpt__list li{list-style:disc;margin-bottom:7px;opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .3s ease}
.gpt.listed .gpt__list li{opacity:1;transform:none}
.gpt.listed .gpt__list li:nth-child(2){transition-delay:.12s}
.gpt.listed .gpt__list li:nth-child(3){transition-delay:.24s}
.gpt__list b{font-weight:600}
/* ChatGPT renders a markdown link in its own blue, and the connector's URL under it. */
.gpt__lnk{color:#0b6bcb;font-weight:600;text-decoration:none}
.gpt__url{display:block;font-size:11.5px;color:#8f8f8f;line-height:1.4}
.gpt__composer{margin:0 15px 15px;border:1px solid rgba(0,0,0,.12);border-radius:26px;height:46px;
  display:flex;align-items:center;gap:11px;padding:0 6px 0 14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.gpt__plus{width:17px;height:17px;flex:none;color:#5d5d5d}
.gpt__field{flex:1;min-width:0;display:flex;align-items:center}
.gpt__ph{font-size:14px;color:#8f8f8f}
.gpt.typing .gpt__ph{display:none}
.gpt__typed{font-size:14px;color:#0d0d0d;white-space:nowrap;overflow:hidden}
.gpt__caret{width:1.5px;height:16px;flex:none;background:#0d0d0d;opacity:0;margin-left:1px}
.gpt.typing .gpt__caret{opacity:1;animation:blink 1s steps(1) infinite}
.gpt__send{width:30px;height:30px;flex:none;border-radius:50%;background:#0d0d0d;display:grid;place-items:center}
.gpt__send svg{width:14px;height:14px;color:#fff}

/* =========================================================================
   FEATURE SECTIONS
   ========================================================================= */
.feat{border-top:1px solid var(--border);padding:clamp(52px,7vw,104px) 0}
.feat__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
/* A grid item will not shrink below its own min-content unless told to, so one wide frame
   (a nowrap table) silently widens the column and pushes the prose out past the page edge.
   The frames already clip themselves; the text must never be the thing that overflows. */
.feat__grid > *{min-width:0}
.feat--flip .feat__text{order:2}
.feat__text{max-width:500px}
.feat h2{margin:18px 0 0}
.feat__body{margin-top:18px;color:var(--muted-text);font-size:1.08rem;line-height:1.55}
.feat__list{margin-top:22px;display:grid;gap:11px}
.feat__li{display:flex;gap:11px;font-size:14.5px;align-items:flex-start}
.feat__li svg{width:18px;height:18px;color:var(--accent-deep);flex:none;margin-top:2px}
.feat__media{position:relative}
.feat__frame{border:1px solid var(--border);box-shadow:0 30px 60px -44px rgba(0,0,0,.4)}
.feat__human{position:absolute;width:150px;aspect-ratio:3/3.7;border:4px solid #fff;overflow:hidden;box-shadow:0 18px 40px -22px rgba(0,0,0,.5)}
.feat__human img{width:100%;height:100%;object-fit:cover}
.feat__human--br{right:-16px;bottom:-22px}
.feat__human--bl{left:-16px;bottom:-22px}
.feat__cap{position:absolute;font-size:11px;background:var(--ink);color:#fff;padding:5px 9px;line-height:1.3}

/* =========================================================================
   METRICS STRIP
   ========================================================================= */
.metrics{border-top:1px solid var(--border);background:var(--paper);padding:clamp(40px,5vw,64px) 0}
.metrics__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.metric{background:var(--paper);padding:26px 22px}
.metric__n{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-.02em;line-height:1}
.metric__l{font-size:13px;color:var(--muted-text);margin-top:9px;line-height:1.35}

/* =========================================================================
   QUOTE
   ========================================================================= */
.quote{border-top:1px solid var(--border);padding:clamp(52px,7vw,96px) 0}
.quote__grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.quote__photo{border:1px solid var(--border);overflow:hidden;aspect-ratio:1/1.12}
.quote__photo img{width:100%;height:100%;object-fit:cover}
.quote__q{font-size:clamp(1.35rem,2.6vw,2rem);font-weight:500;line-height:1.28;letter-spacing:-.015em}
.quote__q .mk{color:var(--accent)}
.quote__by{margin-top:22px;font-size:14px}
.quote__by b{font-weight:600}
.quote__by span{color:var(--muted-text)}

/* =========================================================================
   CLOSING CTA
   ========================================================================= */
.close{position:relative;color:#fff;background:var(--accent-deep);overflow:hidden}
/* a quiet brand detail: oversized sharp orange blocks, flat, no gradient */
.close::before{content:"";position:absolute;top:0;right:0;width:min(38%,440px);height:100%;background:var(--accent);opacity:.5;clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
.close::after{content:"";position:absolute;left:0;bottom:0;width:120px;height:14px;background:var(--accent-soft)}
.close__in{position:relative;z-index:1;padding:clamp(64px,9vw,124px) 0}
.close h2{margin:0;max-width:16ch}
.close__sub{margin-top:18px;font-size:1.15rem;color:rgba(255,255,255,.88);max-width:46ch}
.close__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{border-top:1px solid var(--border);padding:clamp(48px,6vw,72px) 0 28px}
/* Brand left, Legal hard right. The launch footer carries ONE link column, and the
   five-column grid this was (1.4fr repeat(4,1fr)) left it stranded in column two with
   three empty tracks after it, which reads as a footer that failed to load rather than
   one that is deliberately short.
   Restore `1.4fr repeat(4,1fr)` when the Product/Solutions/Company columns come back. */
.foot__top{display:grid;grid-template-columns:1.4fr auto;gap:32px 24px}
.foot__brand .brand{margin-bottom:14px}
.foot__tag{font-size:13.5px;color:var(--muted-text);max-width:30ch;line-height:1.5}
.foot__made{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--muted-text)}
.foot__made svg{width:20px;height:20px}
.foot__h{font-size:11px;font-weight:500;letter-spacing:var(--eyebrow);text-transform:uppercase;color:var(--muted-text);margin-bottom:14px}
.foot__col a{display:block;font-size:14px;color:var(--ink);padding:6px 0}
.foot__col a:hover{color:var(--accent-deep)}
.foot__col a .tag-new{margin-left:6px}
.foot__bottom{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid var(--border);font-size:13px;color:var(--muted-text)}
.foot__legal{display:flex;flex-wrap:wrap;gap:18px}
.foot__legal a:hover{color:var(--accent-deep)}
.foot__langbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);height:36px;padding:0 12px;font-size:13px}
.foot__langbtn:hover{background:var(--fill-hover)}
.foot__langbtn svg{width:15px;height:15px;color:var(--muted)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__media{max-width:420px}
  .feat__grid,.quote__grid{grid-template-columns:1fr;gap:34px}
  .feat--flip .feat__text{order:0}
  .quote__photo{max-width:280px}
  .metrics__grid{grid-template-columns:1fr 1fr}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:820px){
  .nav__links,.nav__login,.nav__right{display:none}
  .nav__burger{display:flex}
  .nav__spacer{display:none}
  .lang--desktop{display:none}
}
@media (max-width:640px){
  /* Compact the hero so the human photo sits above the fold and the demo peeks. */
  .hero{padding-top:24px;padding-bottom:26px}
  .hero__grid{gap:22px}
  .h-display{font-size:clamp(1.95rem,8.4vw,2.7rem)}
  .hero h1{margin-top:6px}
  .hero__sub{margin-top:14px;font-size:1.02rem}
  .hero__cta{margin-top:20px;gap:10px;flex-wrap:nowrap}
  .hero__cta .btn{flex:1 1 0;min-width:0;width:auto;padding:0 12px;height:50px}
  .hero__promise{margin-top:13px;font-size:12.5px}
  .hero__reassure{margin-top:18px;gap:14px 22px}
  .hero__media{max-width:none;margin-top:2px}
  .hero__photo{aspect-ratio:3/2}
  .hero__photo img{object-position:50% 21%}
  .hero__caption{display:none}
  /* compact badge in the lower-left, over the orange wall, so it never covers her */
  .hero__badge{left:0;bottom:10px;width:150px;padding:9px 11px}
  .hero__badge .gauge__num{font-size:29px}
  .hero__badge .gauge__track{margin-top:8px;height:8px}
  .demo-sec{padding-top:14px}
}
@media (max-width:560px){
  .metrics__grid{grid-template-columns:1fr 1fr}
  .foot__top{grid-template-columns:1fr}
  .cm,.co{grid-template-columns:1fr}
  .cm__cv{border-right:none;border-bottom:1px solid var(--border)}
  .co__side{border-left:none;border-top:1px solid var(--border)}
  .frame{font-size:12px}
  .grid-t .hide-s{display:none}
  .close__cta .btn{width:100%;flex:1 1 auto}
}
/* ---- demo responsiveness ---- */
.demo__tabswrap{position:relative}
@media (max-width:820px){
  .demo__tabs{overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
  .demo__tabs::-webkit-scrollbar{display:none}
  .demo__tab{flex:0 0 auto;min-width:44%}
  /* right-edge fade signals the strip scrolls */
  .demo__tabswrap::after{content:"";position:absolute;top:0;right:0;bottom:2px;width:44px;background:linear-gradient(90deg,rgba(255,255,255,0),var(--canvas));pointer-events:none}
}
@media (max-width:680px){
  .demo-desk{display:none!important}
  .pdemo{display:block}
  .demo{height:clamp(470px,126vw,590px)}
  .demo__rail{width:44px}
  .demo__brand{width:24px;height:24px;font-size:13px}
  .demo__ic{width:34px;height:34px}
  .demo__user{width:26px;height:26px}
  .scene__search{min-width:0;flex:1;margin-left:12px}
  .scene__detail{width:100%;min-width:0}
  .scene.opened .scene__list{margin-right:0}
  .cm2{grid-template-columns:150px 1fr}
  .demo-grid .hide-xs{display:none}
  .demo-grid th,.demo-grid td{padding-left:12px;padding-right:12px}
  .brk{grid-template-columns:1fr}
  .person2{flex-direction:column;gap:9px}
  .person2__id{flex:none}
}
@media (max-width:460px){
  .scene__search{display:none}
  .cm2{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .cm2__cv{border-right:none;border-bottom:1px solid var(--border)}
  .cv2 .cm__skills{display:none}
  .up{padding:12px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================================================================
   AUTH PAGES (sign-up, login) and LEGAL PAGES.

   These deliberately mirror the app's own controls rather than inventing a
   marketing-site form language: a visitor who signs up here and later sees the
   real product should not notice a seam. The numbers come from the app's
   src/components/ui/{text-input,button,field,checkbox}.tsx and its
   public-shell.tsx AuthCard — 36px controls, 1px borders, no rounded corners,
   60ms linear transitions.
   ========================================================================= */
.auth{display:flex;align-items:center;justify-content:center;padding:clamp(32px,6vw,72px) var(--pad)}
.authcard{width:100%;max-width:448px;border:1px solid var(--border);padding:clamp(24px,4vw,32px)}
.authcard h1{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.authcard__body{margin-top:6px;font-size:13px;line-height:1.6;color:var(--muted-text)}
.authcard__form{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.authcard__foot{margin-top:24px;border-top:1px solid var(--border);padding-top:16px;font-size:13px;color:var(--muted-text)}
.authcard__foot a{color:var(--accent-deep);font-weight:500;text-decoration:underline;text-underline-offset:4px}

.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:13px;font-weight:500;color:var(--ink)}
.field__hint{font-size:11px;line-height:1.5;color:var(--muted-text)}
.field__err{font-size:11px;line-height:1.5;color:var(--danger)}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.field__row{grid-template-columns:1fr}}

.input{
  height:36px;width:100%;border:1px solid var(--border);background:var(--canvas);
  padding:0 12px;font:inherit;font-size:14px;color:var(--ink);
  transition:border-color .06s linear;
}
.input:hover{border-color:var(--muted)}
.input::placeholder{color:var(--muted-text)}
.input[aria-invalid="true"]{border-color:var(--danger)}

/* The app's checkbox: a real input kept operable but invisible, with a drawn box
   beside it, so the native focus ring lands on something we can style. */
.check{display:flex;align-items:flex-start;gap:10px}
.check__box{position:relative;display:inline-flex;width:16px;height:16px;flex:none;margin-top:1px}
.check__box input{position:absolute;inset:0;width:16px;height:16px;opacity:0;cursor:pointer;margin:0}
.check__mark{
  pointer-events:none;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border:1px solid var(--border);background:var(--canvas);
  transition:background-color .06s linear,border-color .06s linear;
}
.check__mark svg{width:12px;height:12px;color:#fff;opacity:0}
.check__box input:hover + .check__mark{border-color:var(--muted)}
.check__box input:checked + .check__mark{background:var(--ink);border-color:var(--ink)}
.check__box input:checked + .check__mark svg{opacity:1}
.check__box input:focus-visible + .check__mark{outline:2px solid var(--accent);outline-offset:2px}
.check__lbl{font-size:13px;line-height:1.45;cursor:pointer}
.check__lbl a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}

/* Full-width form button at the app's control height, not the marketing 48px. */
.btn--form{width:100%;height:36px;font-size:14px;padding:0 16px}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--border);color:var(--muted-text);cursor:not-allowed}
.btn:disabled:active,.btn[aria-disabled="true"]:active{transform:none}

/* A failure that belongs to no single field. */
.authcard__alert{font-size:13px;line-height:1.5;color:var(--danger)}

/* ---- legal pages: a reading measure, not a form's width ---- */
.legal{padding:clamp(32px,5vw,64px) 0 clamp(48px,6vw,80px)}
.legal__inner{max-width:720px}
.legal h1{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.legal__updated{margin-top:10px;font-size:13px;color:var(--muted-text)}
.legal__draft{margin-top:24px;border:1px solid var(--accent);background:var(--paper);padding:16px 18px}
.legal__draft b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.legal__draft p{font-size:13.5px;line-height:1.6;color:var(--muted-text)}
.legal__sec{margin-top:36px}
.legal__sec h2{font-size:19px;letter-spacing:-.01em}
.legal__sec p{margin-top:12px;font-size:15px;line-height:1.65;max-width:68ch}
.legal__sec ul{margin-top:12px;padding-left:20px;max-width:68ch}
.legal__sec li{font-size:15px;line-height:1.65;margin-top:6px}
.legal__sec a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}