/* Home page components. Loaded after site.css and nav.css and shares their tokens.
   The product is shown as real screenshots of the demo, cropped hard at the edge of
   the element that holds them. Nothing on this page is drawn any more. */

/* hero */
.hero{padding:var(--sp-block) 0 var(--sp-section)}
.hero .top{max-width:720px}
.kicker{margin-bottom:22px;font-size:.9rem;color:var(--mut);font-weight:600;display:flex;gap:10px;align-items:center}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--teal);display:inline-block;flex:none;box-shadow:0 0 0 4px var(--green-tint)}
.hero h1{max-width:16ch;margin-bottom:22px}
.hero .lede{margin-bottom:30px}

/* the stage: a lit panel with the real product on it, cropped at the bottom edge */
.stage{position:relative;margin-top:var(--sp-block);border-radius:var(--r-hero);padding:28px 40px 0;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 9%,#fff),var(--soft) 85%)}
.stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(42% 60% at 12% 0%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%),radial-gradient(36% 50% at 92% 8%,color-mix(in srgb,var(--teal) 16%,transparent),transparent 70%)}
.stage-tabs{position:relative;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.stage-tabs button{font-weight:700;font-size:.9rem;padding:8px 14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--ink-2);transition:background 150ms var(--ease),color 150ms var(--ease)}
.stage-tabs button:hover{color:var(--ink)}
.stage-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.stage-frame{position:relative;height:520px;border-radius:var(--r-panel) var(--r-panel) 0 0;border:1px solid var(--line);border-bottom:0;background:#fff;box-shadow:var(--sh-lg);overflow:hidden}
.stage-frame>img{position:absolute;inset:0;width:100%;height:auto;opacity:0;transform:scale(1.012);transition:opacity .5s var(--ease),transform .9s var(--ease)}
.stage-frame>img.on{opacity:1;transform:none}
/* the event feed: seven product moments arrive one after another, 4.5s each on a
   31.5s cycle, no bobbing; the board line closes the cycle from the bottom left */
.feed{position:absolute;top:88px;right:12px;width:320px;height:64px}
.feed--b{top:auto;bottom:44px;right:auto;left:12px}
.event{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:10px 14px 10px 10px;box-shadow:var(--sh-lg);font-size:13px;white-space:nowrap;opacity:0;transform:translateX(16px);animation:event 31.5s var(--ease) infinite}
.event.e2{animation-delay:4.5s}
.event.e3{animation-delay:9s}
.event.e5{animation-delay:13.5s}
.event.e6{animation-delay:18s}
.event.e7{animation-delay:22.5s}
.event.e8{animation-delay:27s}
.event.e4{animation-name:event-b}
.event i{width:28px;height:28px;border-radius:50%;background:var(--green-tint);color:var(--green);display:inline-flex;align-items:center;justify-content:center;flex:none}
.event i.w{background:var(--tint);color:var(--brand)}
.event i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.event b{display:block;font-weight:800;letter-spacing:-.01em}
.event small{display:block;color:var(--mut);font-size:12px}
@keyframes event{0%{opacity:0;transform:translateX(16px)}1.6%{opacity:1;transform:none}12.4%{opacity:1;transform:none}14.2%{opacity:0;transform:translateX(-8px)}100%{opacity:0;transform:translateX(16px)}}
@keyframes event-b{0%,87%{opacity:0;transform:translateY(8px)}89%{opacity:1;transform:none}97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.event{animation:none;display:none}.event.e8,.event.e4{display:flex;opacity:1;transform:none}.stage-frame>img{transition:none;transform:none}}

/* product cards: a real crop on top, one sentence under it */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-gap)}
.grid3.grid--4{grid-template-columns:repeat(4,1fr)}
.pc{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow 150ms var(--ease)}
.pc:hover{box-shadow:var(--sh)}
/* the product on a small stage: a framed screen that bleeds off the corner, pans on hover */
.pc .art{position:relative;flex:1;min-height:236px;overflow:hidden;background:linear-gradient(135deg,var(--tint-2),var(--soft));border-bottom:1px solid var(--line-2)}
.pc .art:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 0% 0%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 70%)}
.shot{position:absolute;left:22px;top:22px;right:-36px;bottom:-36px;border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--sh-lg);background:#fff;overflow:hidden;transition:transform .6s var(--ease)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:0 0;transition:object-position 1.6s var(--ease)}
.pc:hover .shot{transform:translate(-6px,-6px)}
.pc:hover .shot img{object-position:14% 22%}
.moment{position:absolute;left:14px;bottom:14px;z-index:1;background:var(--ink);color:#fff;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:6px 11px;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pc:hover .moment{opacity:1;transform:none}
@media(hover:none){.moment{opacity:1;transform:none}}
.pc .body{padding:var(--sp-gap)}
.pc h3{margin-bottom:8px}
.pc p{font-size:.98rem;color:var(--mut);line-height:1.55}

/* rooms: the page alternates paper, soft and night so each section reads as its own place */
.band{padding:var(--sp-section) 0;background:var(--night);color:#fff}
.band h2{color:#fff}
.band p,.band .lede{color:var(--grey-2)}
.band .lbl--brand{color:var(--brand-2)}
.band .lbl--brand:before{background:var(--brand-2)}
.band .ticks li{color:var(--grey)}
.band .link{color:var(--brand-2)}
.band .split figure{background:var(--night-2);border:1px solid rgba(255,255,255,.08);box-shadow:var(--sh-lg)}
.band .founder{max-width:none;margin-top:var(--sp-section);background:var(--night-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-hero);padding:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-block);align-items:center}
.band .founder .ticks{margin-top:4px}
.band .founder .sig{color:#fff}
.band .lead{box-shadow:none}
.band--soft{padding:var(--sp-section) 0;background:var(--soft);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.band--soft .panel{background:#fff;border-color:var(--line)}
.band--soft .pc,.band--soft .ac{border-color:var(--line)}
.closing.band p{color:var(--grey-2)}

/* story splits: one photo or product vignette beside one message */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-block);align-items:center}
.split+.split{margin-top:var(--sp-section)}
.split.rev figure{order:2}
.split figure{margin:0;border-radius:var(--r-panel);overflow:hidden;background:var(--soft);aspect-ratio:4/3}
.split figure img{width:100%;height:100%;object-fit:cover}
/* the Hiring Room figure carries the small Prospect room frame over its bottom right corner */
.split figure{position:relative}
.split figure .pf--room{position:absolute;right:0;bottom:0;width:52%;box-shadow:var(--sh-lg)}
.founder{max-width:46ch}
.split+.founder{margin-top:var(--sp-section)}
.founder h2{margin:4px 0 14px}
.founder .lede{font-size:1.08rem;margin-bottom:22px}
.founder .sig{margin-top:22px;font-weight:600;color:var(--ink-2)}
.split h2{margin:4px 0 14px}
.split .lede{font-size:1.08rem;margin-bottom:22px}

/* insights row */
.ac{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;color:inherit;transition:box-shadow 150ms var(--ease)}
.ac:hover{box-shadow:var(--sh)}
.ac .art{position:relative;height:170px;overflow:hidden;background:linear-gradient(135deg,var(--tint-2),var(--soft));border-bottom:1px solid var(--line-2)}
.ac .art .shot{left:18px;top:18px;right:-30px;bottom:-30px}
.ac:hover .shot{transform:translate(-4px,-4px)}
.ac:hover .shot img{object-position:14% 22%}
.ac .body{padding:18px 20px 20px}
.ac .lbl{margin-bottom:8px}
.ac h3{font-size:1.08rem;line-height:1.3;margin-bottom:8px}
.ac p{font-size:.94rem;color:var(--mut);line-height:1.5}

/* pricing panel */
.plan{display:grid;grid-template-columns:1fr auto;gap:var(--sp-block);align-items:center}
.plan ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.plan li{display:flex;gap:9px;align-items:center;font-weight:600;color:var(--ink-2);font-size:.98rem}
.plan li svg{width:18px;height:18px;fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.plan .acts{flex-direction:column;align-items:flex-start;gap:14px}

/* closing */
.closing{text-align:center}
.closing h2{max-width:18ch;margin:0 auto 14px}
.closing p{color:var(--mut);font-size:1.12rem;max-width:44ch;margin:0 auto 28px}
.closing .lead{margin:0 auto;text-align:left}

@media(max-width:960px){
  .grid3{grid-template-columns:1fr 1fr}
  .grid3.grid--4{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:28px}
  .split.rev figure{order:0}
  .plan{grid-template-columns:1fr}
  .band .founder{grid-template-columns:1fr;padding:28px}
  .feed{display:none}
  .stage{padding:20px 20px 0}
  .stage-frame{height:360px}
}
@media(max-width:640px){
  .grid3{grid-template-columns:1fr}
  .split figure .pf--room{width:64%}
  .plan ul{grid-template-columns:1fr}
  .stage{padding:14px 12px 0;border-radius:var(--r-panel)}
  .stage-frame{height:220px}
  .stage-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:4px;margin:-4px -4px 24px}
  .stage-tabs button{white-space:nowrap}
}

/* ── home, fourth pass: set up the way spott.io and warp.co set up their pages. An announcement bar,
   a left hero with an email capture and the product below it on the full width, a facts strip where
   their logo rows sit, a statement with a rule on the left, six product tiles, a pinned list that
   walks four panes, a night showcase card, a numbered timeline, a compare grid, a trust band, a dark
   pricing card, questions, insights, a closing card and a giant wordmark. Tokens only. ── */
.wide{max-width:1280px;margin:0 auto;padding:0 32px}
.v4{padding:var(--sp-section) 0 0}
.v4--last{padding-bottom:var(--sp-section)}
.soft{font-weight:500;color:var(--mut)}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--brand);margin-bottom:14px}

/* announcement bar */
.announce{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;background:var(--night);color:#fff;font-size:.86rem;padding:9px 16px;text-align:center}
.announce .tag{color:var(--brand-2);font-weight:700}
.announce a{color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.announce a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.announce a:hover{text-decoration:underline}

/* hero: words on the left, the product below on the full width */
.hv4{padding:56px 0 0;position:relative}
.hv4:before{content:"";position:absolute;left:0;right:0;top:0;height:560px;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,var(--ink),transparent);mask-image:linear-gradient(180deg,var(--ink),transparent);opacity:.7;pointer-events:none}
.hv4 .wide{position:relative}
.hv4-top{max-width:760px}
.hv4 .stat{font-size:.86rem;color:var(--ink-2);font-weight:600;margin-bottom:22px}
.hv4 h1{font-size:clamp(2.5rem,4.8vw,3.9rem);font-weight:700;letter-spacing:-.04em;line-height:1.04;margin-bottom:22px}
.hv4 .lede{font-size:1.1rem;max-width:58ch;margin-bottom:30px;color:var(--ink-2)}
.hv4-acts{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.capture{display:flex;gap:6px;align-items:center;background:var(--soft);border:1px solid var(--line-2);border-radius:var(--r-btn);padding:6px 6px 6px 18px;width:min(100%,470px)}
.capture input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:.96rem;color:var(--ink)}
.capture input:focus{outline:0}
.capture input::placeholder{color:var(--mut)}
.tour{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--ink-2)}
.tour i{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.tour i svg{width:12px;height:12px;fill:currentColor;stroke:none;margin-left:2px}
.tour:hover{color:var(--brand)}
.hv4 .fine{font-size:.9rem;line-height:1.45;color:var(--mut)}
.cap-row{display:flex;align-items:center;gap:22px}
.cap-row .capture{flex:none;width:470px;max-width:100%}
.hv4 .fine a{color:var(--brand);font-weight:600}
.hv4 .stage{margin-top:40px}
@media(min-width:1200px){.hv4 .stage-frame{height:600px}.hv4 .feed{top:104px;right:24px}}

/* the logo row: the tools Demure works with, as grey wordmarks that drift like a logo marquee */
.logos{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:36px;margin-top:44px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logos-k{font-size:.86rem;color:var(--mut);font-weight:600;white-space:nowrap}
.logos-track{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 8%,var(--ink) 92%,transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 8%,var(--ink) 92%,transparent)}
.logos ul{list-style:none;display:flex;gap:64px;padding-right:64px;flex:none;animation:logos 34s linear infinite}
.logos li{font-weight:800;font-size:1.22rem;letter-spacing:-.03em;color:var(--mut-2);white-space:nowrap}
.logos-note{margin-top:12px}
@keyframes logos{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.logos ul{animation:none}.logos ul[aria-hidden]{display:none}.logos-track{mask-image:none;-webkit-mask-image:none;flex-wrap:wrap}}

/* the facts strip, where their logo rows sit */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:44px}
.facts>div{padding:22px 24px 22px 0;border-right:1px solid var(--line);margin-right:24px}
.facts>div:last-child{border-right:0;margin-right:0}
.facts b{display:block;font-size:1.25rem;letter-spacing:-.025em;margin-bottom:4px}
.facts span{font-size:.92rem;color:var(--mut)}

/* a section head with a rule on the left */
.rule-head{border-left:3px solid var(--brand);padding-left:22px;margin-bottom:44px}
.rule-head h2{font-size:clamp(1.55rem,2.4vw,2.05rem);font-weight:700;letter-spacing:-.03em;line-height:1.25;max-width:62ch;margin:0}
.rule-head--row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}

/* six product tiles */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-block) 40px}
.fcard{display:block;color:inherit}
.ftile{position:relative;height:230px;overflow:hidden;border-radius:var(--r-panel);background:var(--soft);border:1px solid var(--line-2);margin-bottom:20px}
.ftile .shot{left:28px;top:28px;right:-40px;bottom:-40px}
.fcard:hover .shot{transform:translate(-6px,-6px)}
.fcard h3{font-size:1.06rem;margin-bottom:8px}
.fcard p{font-size:.96rem;color:var(--mut);line-height:1.6}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.92rem;font-weight:700;color:var(--ink)}
.more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fcard:hover .more,.icard:hover .more{color:var(--brand)}
.also{margin-top:44px;color:var(--mut);font-size:1rem}
.also a{color:var(--brand);font-weight:600}
.also a:hover{text-decoration:underline}

/* the pinned list that walks four panes */
.pin{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--sp-block);align-items:start}
.stick{position:sticky;top:112px}
.stick h2{font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:-.035em;margin-bottom:22px}
.stick ol{list-style:none;margin-top:36px;display:flex;flex-direction:column;gap:6px}
.stick li button{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:.98rem;font-weight:600;color:var(--mut);text-align:left;transition:color .2s var(--ease)}
.stick li button:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);flex:none;transition:background .2s var(--ease)}
.stick li.on button{color:var(--ink);font-weight:700}
.stick li.on button:before{background:var(--brand)}
.stick li button:hover{color:var(--ink)}
.panes{display:flex;flex-direction:column;gap:var(--sp-section)}
.pane{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--sp-block);align-items:center}
.crop{position:relative;height:460px;overflow:hidden;border-radius:var(--r-panel);border:1px solid var(--line);background:#fff;box-shadow:var(--sh-lg)}
.crop>.pf{position:absolute;left:0;top:0;width:960px;max-width:none;border:0;border-radius:0;box-shadow:none}
.crop>img{position:absolute;left:0;top:0;width:1120px;max-width:none;height:auto}
.ptext h3{font-size:1.4rem;letter-spacing:-.025em;margin-bottom:12px}
.ptext p{font-size:1rem;color:var(--mut);line-height:1.6;margin-bottom:18px}
.checks{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;font-weight:600;color:var(--ink-2)}
.checks li svg{width:16px;height:16px;flex:none;margin-top:5px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* the night showcase card */
.showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:var(--night);color:#fff;border-radius:var(--r-hero);overflow:hidden;min-height:520px}
.showcase .words{padding:56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.showcase .eyebrow{color:var(--brand-2)}
.showcase h2{color:#fff;font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:16px}
.showcase p{color:var(--grey-2);font-size:1.05rem;max-width:44ch}
.showcase .link{color:var(--brand-2);margin-top:22px}
.showcase small{display:block;margin-top:34px;color:var(--grey-2);font-size:.86rem}
.showcase figure{margin:0;position:relative;min-height:320px}
.showcase figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}

/* the numbered timeline */
.center-head{text-align:center;margin-bottom:48px}
.center-head .kick{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.center-head h2{margin:0 auto 12px;max-width:24ch;text-wrap:balance}
.center-head p{color:var(--mut);font-size:1.08rem;max-width:52ch;margin:0 auto}
.timeline{display:grid;grid-template-columns:repeat(3,1fr)}
.timeline>div{padding-right:32px;margin-right:32px;border-right:1px solid var(--line-2)}
.timeline>div:last-child{border-right:0;margin-right:0;padding-right:0}
.timeline .num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 8px;border-radius:var(--r-btn);background:var(--soft);border:1px solid var(--line);font-size:.72rem;font-weight:700;color:var(--ink-2);margin-bottom:22px}
.timeline .rail{border-top:1px dashed var(--line);margin-bottom:24px}
.timeline h3{font-size:1.14rem;margin-bottom:10px}
.timeline p{font-size:.96rem;color:var(--mut);line-height:1.6}

/* the compare grid, under the five step strip */
#compare .pf-five{margin-bottom:var(--sp-gap)}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff}
.cgrid a{display:flex;align-items:center;justify-content:center;min-height:110px;padding:24px;font-weight:700;color:var(--mut);border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;transition:color .15s var(--ease),background .15s var(--ease)}
.cgrid a:nth-child(4n){border-right:0}
.cgrid a:nth-last-child(-n+4){border-bottom:0}
.cgrid a:hover{color:var(--ink);background:var(--soft)}
.cgrid a.all{background:var(--soft);color:var(--ink);gap:8px}
.cgrid a.all svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the dark pricing card */
.dark3{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:40px;background:var(--night);color:#fff;border-radius:var(--r-hero);padding:48px}
.dark3>div{border-left:1px solid rgba(255,255,255,.12);padding-left:32px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.dark3>div:first-child{border-left:0;padding-left:0}
.dark3 .eyebrow{color:var(--brand-2);margin:0}
.dark3 h3{color:#fff;font-size:1.5rem;letter-spacing:-.03em}
.dark3>div:first-child h3{font-size:2.3rem;letter-spacing:-.04em}
.dark3 p{color:var(--grey-2);font-size:.98rem;line-height:1.6;flex:1}
.dark3 .pf-source{color:var(--grey-2);margin:0}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.18);color:#fff}

/* insights */
.irow{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.icard{display:block;color:inherit}
.icard .cover{aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--soft);margin-bottom:18px}
.icard .cover img{width:100%;height:100%;object-fit:cover;object-position:0 0;transition:transform .6s var(--ease)}
.icard:hover .cover img{transform:scale(1.03)}
.meta-line{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.icard h3{font-size:1.1rem;line-height:1.3;margin-bottom:8px}
.icard p{font-size:.95rem;color:var(--mut);line-height:1.55}

/* the closing card */
.cta-card{position:relative;overflow:hidden;background:var(--night);color:#fff;border-radius:var(--r-hero);padding:72px 64px;min-height:360px;display:flex;align-items:center}
.cta-in{position:relative;z-index:1;max-width:560px}
.cta-card h2{color:#fff;font-size:clamp(1.9rem,3.2vw,2.7rem);margin-bottom:14px}
.cta-card p{color:var(--grey-2);font-size:1.08rem;margin-bottom:26px}
.cta-card .lead{box-shadow:none}
.cta-card :focus-visible{outline-color:#fff}

/* the giant wordmark under the footer */
.giant{font-size:clamp(5rem,21vw,19rem);font-weight:800;letter-spacing:-.06em;line-height:.78;text-align:center;color:var(--tint);height:.62em;overflow:hidden;user-select:none;margin-top:8px}

@media(max-width:960px){
  .wide{padding:0 24px}
  .facts{grid-template-columns:1fr 1fr}
  .facts>div:nth-child(2){border-right:0}
  .fgrid{grid-template-columns:1fr 1fr}
  .pin{grid-template-columns:1fr}
  .stick{position:static}
  .stick ol{display:none}
  .pane{grid-template-columns:1fr}
  .crop{height:360px}
  .showcase{grid-template-columns:1fr}
  .showcase .words{padding:40px 32px}
  .timeline{grid-template-columns:1fr;gap:32px}
  .timeline>div{border-right:0;margin-right:0;padding-right:0}
  .cgrid{grid-template-columns:1fr 1fr}
  .cgrid a:nth-child(4n){border-right:1px solid var(--line)}
  .cgrid a:nth-child(2n){border-right:0}
  .cgrid a:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .cgrid a:nth-last-child(-n+2){border-bottom:0}
  .dark3{grid-template-columns:minmax(0,1fr);padding:32px}
  .dark3>div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}
  .dark3>div:first-child{border-top:0;padding-top:0}
  .irow{grid-template-columns:1fr}
  .cta-card{padding:48px 32px}
}
@media(max-width:640px){
  .wide{padding:0 16px}
  .facts{grid-template-columns:1fr}
  .facts>div{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--line-2)}
  .facts>div:last-child{border-bottom:0}
  .fgrid{grid-template-columns:1fr}
  .hv4-acts{flex-direction:column;align-items:stretch}
  .capture{flex-direction:column;align-items:stretch;padding:8px}
  .capture input{padding:8px 10px}
  .crop{height:240px}
  .crop>.pf{width:720px}
  .crop>img{width:900px}
}
@media(prefers-reduced-motion:reduce){.icard .cover img,.stick li button,.stick li button:before,.cgrid a{transition:none}}

/* ── home, fifth pass: motion that follows the scroll. The hero arrives once on load; each block
   rises in as it enters (site.css .rv); the logo band holds the bottom of the first screen; the
   stage tabs run on a visible timer; the statement brightens as it scrolls; one frame pins and
   swaps its four panes; the dark rooms grow in. Durations and the drawer curve live on :root in
   site.css. Everything rests under reduced motion and without script. ── */

/* the home nav and footer line up with the wider page */
@media(min-width:961px){body:has(.hv4) .nav-in{max-width:1280px;padding:0 clamp(19px,calc(50% - 621px),31px)}}
body:has(.hv4) footer .wrap{max-width:1280px;padding:0 32px}
@media(max-width:960px){body:has(.hv4) footer .wrap{padding:0 24px}}
@media(max-width:640px){body:has(.hv4) footer .wrap{padding:0 16px}}

/* hero: the pieces arrive in order, the product last and from a little further down */
@media(prefers-reduced-motion:no-preference){
  .hv4 .intro{animation:rise var(--t-reveal) var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms + 80ms)}
  .hv4 .stage.intro{animation-name:rise-stage}
}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
@keyframes rise-stage{from{opacity:0;transform:translateY(48px) scale(.985)}}
.hv4-acts{margin-top:2px}
.hv4 .stage-frame>img{height:100%;object-fit:cover;object-position:left top}

/* the logo band holds the bottom edge of the first screen while the product slides under it */
@media(min-width:961px) and (min-height:1000px){
  .hv4 .logos{position:sticky;bottom:0;z-index:3;margin-top:28px;padding:14px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.logos.is-idle ul{animation-play-state:paused}
.stage.is-idle .event{animation-play-state:paused}

/* stage tabs: a thin bar fills under the active tab; when it is full the next view takes over */
.stage-tabs button{position:relative;overflow:hidden;flex:none}
.stage-tabs button.on:after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:var(--r-pill);background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left;animation:tabfill 6s linear forwards paused}
.stage.is-playing .stage-tabs button.on:after{animation-play-state:running}
@media(hover:hover){.stage.is-playing:hover .stage-tabs button.on:after{animation-play-state:paused}}
.stage.is-stopped .stage-tabs button.on:after{animation:none;opacity:0}
@keyframes tabfill{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.stage-tabs button.on:after{display:none}}

/* the statement: home.js sets each word's opacity from the scroll position */
.is-sweep span{transition:opacity .2s linear}

/* How Demure helps. Without .is-pinned the panes stack. With it (home.js, wide screens only) the
   section becomes a scroll track: the block sticks under the nav, the panes share one cell and
   swap as the track passes, and the rail beside the list fills with the progress. */
.stick ol{position:relative}
.stick li button:before{position:relative;z-index:1;box-shadow:0 0 0 4px var(--bg)}
.stepper.is-pinned .stick ol:before,.stepper.is-pinned .stick ol:after{content:"";position:absolute;left:3px;top:21px;bottom:21px;width:2px;border-radius:var(--r-pill);background:var(--line)}
.stepper.is-pinned .stick ol:after{background:var(--brand);transform:scaleY(var(--p,0));transform-origin:top;transition:transform .15s linear}
.stepper.is-pinned .pin{position:sticky;top:88px;align-items:center}
.stepper.is-pinned .stick{position:static}
.stepper.is-pinned .panes{display:grid;align-items:center}
/* the outgoing pane clears in under a fifth of a second; the incoming one waits for it, then rises */
.stepper.is-pinned .pane{grid-area:1/1;align-items:start;opacity:0;transform:translateY(28px);pointer-events:none;transition:opacity .18s linear,transform .3s var(--ease-out)}
.stepper.is-pinned .pane.was{transform:translateY(-28px)}
.stepper.is-pinned .pane.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .4s var(--ease-out) .12s,transform var(--t-swap) var(--ease-out) .12s}
.pane .ptext .link{white-space:normal}
#hiring-room{padding-top:var(--sp-block)}

/* pricing carries the trust badges as its last row */
.dark3>.dark3-foot{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 28px;align-items:center;border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:28px}
.dark3-foot b{color:#fff;font-size:1.02rem;letter-spacing:-.01em}
.dark3 .badges{display:flex;gap:10px;flex-wrap:wrap}
.dark3 .badges>div{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:5px 12px 5px 6px}
.dark3 .badges i{width:24px;height:24px;border-radius:50%;background:var(--night-2);display:inline-flex;align-items:center;justify-content:center;color:var(--grey);flex:none}
.dark3 .badges i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dark3 .badges span{font-size:.84rem;font-weight:600;color:var(--grey)}
.dark3-foot p{grid-column:1/-1;font-size:.9rem;flex:none}
.dark3-foot p a{color:var(--brand-2);font-weight:600}

/* the timeline rails draw themselves as their step arrives */
@media(prefers-reduced-motion:no-preference){
  html.motion .timeline>.rv .rail{transform:scaleX(0);transform-origin:left}
  html.motion .timeline>.rv.in .rail{transform:none;transition:transform .7s var(--ease-out) .2s}
}


@media(max-width:960px){
  .dark3>.dark3-foot{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* one line of announcement, so the product shows sooner */
  .announce{flex-wrap:nowrap;justify-content:space-between;gap:10px;white-space:nowrap;text-align:left}
  .announce .tag{display:none}
  .announce>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .announce a{flex:none}
  /* the six tiles and the three insights become rows you swipe, with the next card peeking in */
  .fgrid,.irow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0 -16px;padding:0 16px 12px;scroll-padding:0 16px;scrollbar-width:none}
  .fgrid,.irow{overflow-y:hidden}
  .fgrid::-webkit-scrollbar,.irow::-webkit-scrollbar{display:none}
  .crop>.pf{width:520px}
  .fcard,.icard{scroll-snap-align:start}
  .ftile{height:200px}
}

/* frames in the panes and the Hiring Room card: a window that starts inset on a soft tile and runs
   off the right and bottom edges, so the crop reads as deliberate, like the product tiles above */
.crop{background:var(--soft);border-color:var(--line-2);box-shadow:none}
.crop>.pf,.crop>img{left:28px;top:28px;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-lg)}
.stepper.is-pinned .ptext{padding-top:6px}
.showcase figure img{inset:auto;left:44px;top:24px;width:960px;max-width:none;height:auto;border-radius:var(--r-card);box-shadow:var(--sh-lg)}
@media(max-width:640px){.crop>.pf,.crop>img{left:16px;top:16px}.showcase figure img{left:20px;top:34px;width:720px}}

/* short laptop screens: a tighter hero so the product starts above the fold */
@media(min-width:961px) and (max-height:820px){
  .hv4{padding-top:32px}
  .hv4 .stat{margin-bottom:14px}
  .hv4 h1{font-size:clamp(2.3rem,4.2vw,3.3rem);margin-bottom:16px}
  .hv4 .lede{margin-bottom:22px}
  .hv4 .stage{margin-top:26px}
}
@media(max-width:640px){.dark3{padding:28px 20px}.dark3 .btn{white-space:normal;text-align:center}.cap-row{flex-direction:column;align-items:stretch;gap:12px;min-width:0}.cap-row .capture{width:100%}.cap-row .fine br{display:none}}

/* print: the pinned section lays its panes out one after another, and nothing waits on scroll */
@media print{
  .stepper.is-pinned{height:auto!important}
  .stepper.is-pinned .pin{position:static;height:auto;padding:0}
  .stepper.is-pinned .panes{display:flex;flex-direction:column;gap:var(--sp-block)}
  .stepper.is-pinned .pane,.hv4 .intro,.rv{opacity:1;transform:none;transition:none;animation:none}
  .stepper.is-pinned .stick ol:before,.stepper.is-pinned .stick ol:after{display:none}
  .is-sweep span{opacity:1!important}
  html.pf-js [data-pf-log] .pf-line,html.pf-js [data-pf-after]{opacity:1;transform:none}
  .hv4 .logos{position:static}
}

/* ── home, sixth pass: glass and light. Frosted panels that let the colour behind them through, a
   slow aurora behind the hero, photographs that settle into place as they arrive, and glass cards
   of the real product floating over them. Colours are tokens, or white at an opacity. ── */

/* the hero: a slow aurora behind it, and the stage as a sheet of glass over it */
.hv4{overflow-x:clip}
.hv4:before{left:-10%;right:-10%;top:-120px;height:1180px;background:radial-gradient(34% 38% at 18% 26%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 70%),radial-gradient(30% 34% at 84% 18%,color-mix(in srgb,var(--teal) 20%,transparent),transparent 70%),radial-gradient(38% 40% at 62% 72%,color-mix(in srgb,var(--brand-2) 22%,transparent),transparent 72%);-webkit-mask-image:none;mask-image:none;opacity:1}
@media(prefers-reduced-motion:no-preference){.hv4:before{animation:aurora 24s ease-in-out infinite alternate}}
.hv4.is-idle:before{animation-play-state:paused}
@keyframes aurora{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,4%,0) scale(1.08)}}
.hv4 .stage{background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--sh-lg)}
.hv4 .stage:before{display:none}
.hv4 .stage-tabs button{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:rgba(255,255,255,.7);transition:background .3s var(--ease-out),color .3s var(--ease-out),transform .3s var(--ease-out)}
.hv4 .stage-tabs button:hover{transform:translateY(-1px)}
.hv4 .stage-tabs button.on{background:var(--ink);border-color:var(--ink)}
.hv4 .capture{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.btn--ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* a photograph as a scene: it fills a rounded frame, settles into place as it arrives, and drifts a
   few pixels against the pointer while its glass cards drift the other way */
.scene{position:relative;margin:0;height:560px;border-radius:var(--r-hero);overflow:hidden;background:var(--soft);isolation:isolate}
.scene-img{position:absolute;left:-3%;top:-3%;width:106%;height:106%;max-width:none;object-fit:cover;translate:calc(var(--px,0) * 8px) calc(var(--py,0) * 6px);transition:translate .8s var(--ease-out)}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .scene-img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@keyframes settle{from{transform:scale(1.12)}to{transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){
  html.motion .scene.rv{opacity:1;filter:none;transform:none;clip-path:inset(8% 6% 0 6% round var(--r-hero))}
  html.motion .scene.rv.in{clip-path:inset(0 0 0 0 round var(--r-hero));transition:clip-path var(--t-reveal) var(--ease-out)}
}
.scene-line{margin-top:28px;max-width:66ch;font-size:1.08rem;color:var(--mut)}

/* a glass card: frosted white over whatever sits behind it, a bright top edge, and a soft light that
   follows the pointer */
.gcard{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:var(--r-panel);background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -18px color-mix(in srgb,var(--night) 40%,transparent);color:var(--ink);overflow:hidden;translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -8px);transition:translate .6s var(--ease-out)}
.gcard:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r-panel);background:radial-gradient(180px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.6),transparent 70%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.gcard:hover:after{opacity:1}
.gcard b{font-size:1.02rem;letter-spacing:-.015em;line-height:1.3}
.gcard small{font-size:.84rem;color:var(--ink-2)}
.gk{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:4px}
.gk .pf-dot{width:7px;height:7px}
.scene[data-scene]:not(.scene--wide):not(.scene--tall):not(.scene--band) .scene-img{object-position:78% 40%}
.gcard--a{left:40px;top:40px;max-width:340px}
.gcard--b{left:88px;top:calc(50% - 32px);flex-direction:row;align-items:center;gap:12px}
.gcard--b>div{display:flex;flex-direction:column;gap:2px}
.gcard--c{left:40px;bottom:40px;max-width:340px}
.gi{width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--brand-dark);display:inline-flex;align-items:center;justify-content:center;flex:none}
.gi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* the team: two photographs side by side, a glass note, three lines on a hairline */
.mosaic{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:var(--sp-gap)}
.scene--wide,.scene--tall{height:520px}
.scene--tall .scene-img{object-position:50% 40%}
.gcard--note{left:28px;bottom:28px}
.gcard--note b{color:var(--brand-dark)}
.team-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-block);margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.team-notes p{font-size:1rem;color:var(--ink-2);font-weight:600;line-height:1.5}

/* Live before lunch opens on the moving boxes */
.scene--band{height:380px;margin-bottom:44px}
.scene--band .scene-img{object-position:50% 45%}

/* the closing card carries a photograph that fades into the night */
.cta-pic{position:absolute;right:0;top:0;width:58%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 40%);mask-image:linear-gradient(90deg,transparent,var(--ink) 40%);opacity:.85}

@media(max-width:960px){
  .scene{height:440px}
  .mosaic{grid-template-columns:1fr}
  .scene--wide{height:400px}
  .scene--tall{height:460px}
  .team-notes{grid-template-columns:1fr;gap:14px}
  .cta-pic{width:100%;opacity:.25;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:640px){
  .scene{height:380px}
  .gcard{padding:10px 14px;max-width:calc(100% - 32px)}
  .gcard b{font-size:.92rem}
  .gcard--a{left:16px;top:auto;bottom:16px}
  .gcard--b,.gcard--c{display:none}
  .scene--wide{height:300px}
  .scene--tall{height:400px}
  .gcard--note{left:16px;bottom:16px}
  .scene--band{height:260px}
}
@media print{.scene.rv,.gcard{clip-path:none;opacity:1;transform:none;filter:none}}

/* home, seventh pass: one path to a person. The hero and the closing card ask for one thing,
   Book a demo (the firm's own booking page); Start free and the live demo sit beside it.
   The stage holds drawings of the app in its current look (app-draw.css) instead of screenshots. */
.cta-pair{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cta-card .cta-pair{position:relative;z-index:1}
.btn--night{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn--night:hover{background:rgba(255,255,255,.16);color:#fff}
.hv4 .stage-frame{background:var(--app-bg)}
.hv4 .stage-frame .ax{pointer-events:none;user-select:none}
@media(max-width:640px){.cap-row .cta-pair{flex-direction:column;align-items:stretch}.cap-row .cta-pair .btn{width:100%}}
/* faces on the morning cards: the same candidates the drawn frames name */
.gfaces{display:flex;align-items:center;margin-top:10px}
.gfaces img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff}
.gfaces img+img{margin-left:-7px}
.gfaces i{font-style:normal;margin-left:8px;font-weight:700;font-size:.8rem;color:var(--brand-dark)}
.gface{position:relative;flex:none;width:40px;height:40px}
.gface img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 2px #fff}
.gface .gi{position:absolute;right:-6px;bottom:-4px;width:20px;height:20px;box-shadow:0 0 0 2px #fff}
.gface .gi svg{width:11px;height:11px}
/* the tour can be paused (home.js adds the button only when motion is allowed); paused or stopped, the drawings keep still */
.stage-pause{position:absolute;top:30px;right:40px;z-index:4;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh);cursor:pointer;transition:transform .3s var(--ease-out),color .3s var(--ease-out)}
.stage-pause:hover{color:var(--ink);transform:translateY(-1px)}
.stage-pause svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stage-pause .i-play,.stage.is-stopped .stage-pause .i-pause{display:none}
.stage.is-stopped .stage-pause .i-play{display:block}
@media(max-width:960px){.stage-pause{top:auto;bottom:14px;right:32px}}
@media(min-width:961px) and (max-width:62.5em){.stage-pause{top:auto;bottom:14px;right:52px}}
@media(max-width:640px){.stage-pause{right:22px;bottom:10px;width:34px;height:34px}}
@media(hover:hover){.stage:hover .ax *,.stage:hover .ax *:after,.stage:hover .ax *:before{animation-play-state:paused!important}}
/* where the frame shows only the left part of the drawing, its right edge fades instead of cutting through words */
.hv4 .stage-frame[data-crop]:after{content:"";position:absolute;top:0;right:0;bottom:0;width:64px;background:linear-gradient(90deg,transparent,var(--app-bg));pointer-events:none;z-index:3}