/* =========================================================
   V4 HEROES: the phone swapped for Lindy at work in a desktop
   window, a task list, or an open canvas. Loaded after styles.css.
   ========================================================= */
.hv{position:relative;overflow:hidden;color:var(--ink);padding:clamp(100px,12.5vh,128px) var(--gut) 24px}
.hv>*{position:relative;z-index:2}
.hv>.h3-bg{position:absolute;z-index:0}
.preload .hv-copy,.preload .hv-stage{visibility:hidden}

/* the words: centred by default, left in the desktop variant */
#fHero.hv-copy{position:relative;inset:auto;left:auto;right:auto;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:var(--wrap);margin:0 auto}
.hv .intro .hi-face{margin:0 .2em 0 0;vertical-align:-.07em}
.hv .intro-cta{margin-top:28px}
#fHero.hv-copy .hero-actions{margin-top:0}
.hv-window .intro .hi,.hv-canvas .intro .hi{font-size:clamp(52px,5.4vw,88px)}
.hv-window .intro .role,.hv-canvas .intro .role{font-size:clamp(28px,2.8vw,44px)}
.hv-window .intro-sub,.hv-canvas .intro-sub{margin-top:18px}

/* logos sit under the visual, in the flow */
.hv .logo-wall{position:relative;inset:auto;bottom:auto;z-index:3;margin-top:clamp(36px,6vh,60px)}

/* the wordmark, drawn from one file and tinted by the nav's colour */
.brand-mask{background:currentColor;-webkit-mask:url(/_sherpa/assets/static/portfolio-v5/assets/site/logo.svg) center/contain no-repeat;mask:url(/_sherpa/assets/static/portfolio-v5/assets/site/logo.svg) center/contain no-repeat}

/* ---------- shared: a Mac window in the Lindy app's look (chat.lindy.ai) ---------- */
.mw{--l-bg:#F6F5F4;--l-ink:#1C1917;--l-mute:#56524D;--l-soft:#6D635B;--l-nav:#4E4D4B;--l-hover:rgba(0,0,0,.06);--l-ring:rgba(0,0,0,.12);--l-card:#F6F5F3;--l-accent:#8E4EC6;--l-green:#22A06B;
  position:relative;background:var(--l-bg);border-radius:14px;overflow:hidden;text-align:left;color:var(--l-ink);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  box-shadow:0 0 0 1px rgba(40,25,5,.12),0 2px 4px rgba(60,40,10,.06),0 28px 56px -22px rgba(70,45,10,.38),0 70px 120px -50px rgba(70,45,10,.4)}
.mw p{text-wrap:wrap}
.mw-bar{height:30px;display:flex;align-items:center;padding:0 14px;background:var(--l-bg)}
.mw-dots{display:flex;gap:8px;flex:none}
.mw-dots i{width:12px;height:12px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.mw-dots i:nth-child(2){background:#FEBC2E}
.mw-dots i:nth-child(3){background:#28C840}
.la-ph{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:#34C759}
.la-ph svg{width:58%;height:58%;fill:#fff}
@keyframes laSpin{to{transform:rotate(360deg)}}

/* ---------- A. WINDOW: the Lindy app working a job live, on a painted panel ---------- */
.hv-scene{max-width:1200px;margin:clamp(32px,4.5vh,48px) auto 0;border-radius:28px;overflow:hidden;
  padding:clamp(40px,5vw,64px) clamp(24px,5vw,64px) 0;background:#F4C9A6 var(--art) 50% 42%/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(120,80,30,.12)}
.hv-scene .mw{max-width:1040px;margin:0 auto -14px}
.hv-window .op-glow{background:radial-gradient(1100px 520px at 50% 22%,rgba(249,184,112,.34),rgba(252,250,245,0) 70%)}
.la-body{display:flex;height:clamp(480px,54vh,560px);padding:0 8px 8px}
/* sidebar: Lindy's floating white panel */
.la-side{width:214px;flex:none;display:flex;flex-direction:column;padding:10px 6px;background:#fff;border-radius:14px;box-shadow:0 2px 6px rgba(0,0,0,.08);font-size:13px;color:var(--l-nav)}
.la-brand{display:flex;align-items:center;gap:7px;padding:2px 8px 10px;font-weight:500;color:var(--l-ink)}
.la-brand img{width:18px;height:18px;border-radius:5px}
.la-search{display:flex;align-items:center;gap:7px;height:28px;padding:0 9px;margin:0 2px 8px;border-radius:8px;background:var(--l-bg);color:#8B847E}
.la-search svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.la-nav p,.la-recents p{display:flex;align-items:center;gap:9px;height:26px;padding:0 8px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-nav p.on,.la-recents p.on{background:var(--l-hover);color:var(--l-ink)}
.la-nav span{display:grid;width:14px;height:14px;flex:none}
.la-nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.la-sec{padding:14px 8px 4px;font-size:12px;font-weight:500;color:rgba(28,25,23,.6)}
.la-recents p{display:block;line-height:26px}
/* the thread: Lindy speaks in plain text beside her face; you speak in a grey block */
.la-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.la-feed{width:100%;max-width:560px;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:14px 24px 10px;
  -webkit-mask-image:linear-gradient(transparent,#000 64px);mask-image:linear-gradient(transparent,#000 64px)}
.la-feed>*{flex:none}
.la-feed .la-idea{margin:2px 0 0}
.la-feed.play [data-step]:not(.in){display:none}
.la-ts{align-self:center;font-size:12.5px;color:var(--l-mute)}
.la-u,.la-l,.la-typing{display:flex;align-items:flex-start;gap:10px}
.la-u img,.la-l img,.la-typing img{width:20px;height:20px;flex:none;border-radius:6px;margin-top:2px;object-fit:cover}
.la-u p{padding:6px 9px;border-radius:6px;background:var(--l-hover);font-size:13.5px;line-height:1.55;color:#1F1E1C}
.la-l p{font-size:14px;line-height:1.65}
.la-worked{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-left:30px;padding:3px 8px;border-radius:7px;background:var(--l-hover);font-size:12.5px;color:var(--l-soft)}
.la-worked svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.la-feed.play .la-worked:not(.final) span::after{content:"";display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;border:1.4px solid currentColor;border-right-color:transparent;vertical-align:-1px;animation:laSpin .8s linear infinite}
.la-typing{display:none}
.la-typing.in{display:flex}
.la-typing span{display:flex;gap:4px;padding:9px 2px}
.la-typing span i{width:5px;height:5px;border-radius:50%;background:#A8A19A;animation:laDot 1s ease-in-out infinite}
.la-typing span i:nth-child(2){animation-delay:.15s}
.la-typing span i:nth-child(3){animation-delay:.3s}
@keyframes laDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
/* tool steps: an app tile with a status badge, the tool, what it did */
.lt{margin-left:30px;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--l-nav)}
.lt-row{display:flex;align-items:center;gap:9px}
.lt b{font-weight:500;color:var(--l-ink)}
.lt span[data-done]{color:var(--l-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-chev{width:12px;height:12px;flex:none;fill:none;stroke:#A8A19A;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lt-ic{position:relative;width:22px;height:22px;flex:none;border-radius:6px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring),0 1px 2px rgba(0,0,0,.06);display:grid;place-items:center}
.lt-ic img{width:64%;height:64%;object-fit:contain}
.lt-ic .la-ph{border-radius:6px}
.lt-ic-ink{background:#5B5750}
.lt-ic-ink span{display:grid;width:13px;height:13px}
.lt-ic-ink svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round}
.lt-ic>i{position:absolute;right:-4px;bottom:-4px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #fff}
.lt-ic>i::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #B9B2AA;border-right-color:transparent;animation:laSpin .8s linear infinite}
.lt.done .lt-ic>i,.la-feed:not(.play) .lt-ic>i,.cv:not(.play) .lt-ic>i{background:var(--l-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.3 5.1 8.1 8.8 4.2' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain}
.lt.done .lt-ic>i::before,.la-feed:not(.play) .lt-ic>i::before,.cv:not(.play) .lt-ic>i::before{display:none}
.lt.done span[data-done]{color:var(--l-nav)}
/* bigger steps open into a card */
.lt-card{display:block;padding:10px 12px 12px;border-radius:14px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring),0 1px 4px rgba(0,0,0,.06)}
.lt-card .lt-row time{margin-left:auto;font-size:12.5px;color:var(--l-soft);font-variant-numeric:tabular-nums}
.la-mini{margin-top:10px;border-radius:10px;overflow:hidden;background:var(--l-bg);box-shadow:0 0 0 .5px var(--l-ring)}
.la-url{display:flex;align-items:center;gap:4px;height:22px;padding:0 9px;font-size:10px;color:#8B847E;border-bottom:.5px solid var(--l-ring)}
.la-url i{width:6px;height:6px;border-radius:50%;background:#D9D4CE}
.la-url span{margin-left:8px;padding:1px 8px;border-radius:4px;background:#fff}
.la-mini ul{list-style:none;margin:0;padding:3px 10px 5px;background:#fff}
.la-mini li{display:flex;align-items:center;gap:7px;height:21px;font-size:11px;color:var(--l-nav)}
.la-mini li+li{border-top:.5px solid #EFEDEA}
.la-dot{width:12px;height:12px;border-radius:50%;background:#E9E6E2}
.la-mini li b{font-weight:500;color:var(--l-ink)}
.la-mini li em{font-style:normal;color:#9A938C}
.la-ok{margin-left:auto;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.3px #D3CDC6;transition:background .25s,box-shadow .25s}
.la-feed.play li[data-tick].ok .la-ok,.la-feed:not(.play) .la-ok,.cv li.ok .la-ok,.cv:not(.play) .la-ok{background:var(--l-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.3 5.1 8.1 8.8 4.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain;box-shadow:none}
.la-wave{display:flex;align-items:center;gap:3px;height:30px;margin-top:10px;padding:0 2px}
.la-wave i{flex:1;height:30%;border-radius:2px;background:var(--l-green);opacity:.9;animation:laWave 1s var(--d,0s) ease-in-out infinite alternate}
.la-call.done .la-wave i{animation:none;height:10%;opacity:.18}
@keyframes laWave{to{height:100%}}
.la-quote{margin-top:8px;font-size:13px;color:var(--l-mute)}
.la-cal{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 10px;border-radius:10px;background:var(--l-card);font-size:12.5px}
.la-cal img{width:16px;height:16px}
.la-cal b{font-weight:500}
.la-cal span{margin-left:auto;color:var(--l-soft)}
.la-feed.play .la-cal{transition:opacity .3s,translate .3s}
.la-feed.play .la-cal:not(.ok){visibility:hidden;opacity:0;translate:0 4px}
/* composer: Lindy's white box */
.la-compose{width:calc(100% - 48px);max-width:512px;flex:none;margin:4px 0 14px;padding:11px 12px 10px 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.03);font-size:13.5px;color:#9A938C}
.la-compose div{display:flex;align-items:center;gap:8px;margin-top:12px}
.la-plus{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 .5px var(--l-ring);font-size:15px;line-height:1;color:var(--l-soft)}
.la-mic{margin-left:auto;display:grid;place-items:center;width:24px;height:24px}
.la-mic svg{width:14px;height:14px;fill:none;stroke:var(--l-soft);stroke-width:1.5;stroke-linecap:round}
.la-send{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#8D8780}
.la-send svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- B. DESKTOP: today's jobs as a checklist, the running one open to show the work ---------- */
.hv-desktop{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hv-split{flex:1;width:100%;max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,3vw,56px);align-items:center}
.hv-split #fHero.hv-copy{align-items:flex-start;text-align:left;margin:0}
.hv-split .intro-cta{align-items:flex-start}
.hv-split .hero-actions{justify-content:flex-start}
.hv-desktop .intro .hi{font-size:clamp(52px,5.6vw,92px)}
.hv-desktop .intro .role{font-size:clamp(26px,2.7vw,44px)}
.hv-desktop .op-glow{background:radial-gradient(760px 620px at 70% 52%,rgba(249,184,112,.42),rgba(250,204,150,.2) 45%,rgba(252,250,245,0) 74%)}
.dk{position:relative;padding:24px 0}
.dl{max-width:600px;margin-left:auto}
.dl-in{margin:0 8px 8px;border-radius:14px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);overflow:hidden}
.dl-head{position:relative;display:flex;align-items:center;gap:11px;padding:14px 18px}
.dl-face{width:30px;height:30px;flex:none;border-radius:9px;overflow:hidden;box-shadow:0 0 0 .5px var(--l-ring)}
.dl-face img{width:100%;height:100%}
.dl-head h3{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.dl-head p{font-size:12px;color:var(--l-soft)}
.dl-count{margin-left:auto;font-size:12.5px;color:var(--l-soft);white-space:nowrap}
.dl-count b{font-weight:600;color:var(--l-ink);font-variant-numeric:tabular-nums}
.dl-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--l-accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.dl-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.5px;background:var(--l-ring)}
.dl-list{list-style:none;margin:0;padding:6px}
.dl-row{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:10px;transition:background .3s}
.dl-row.run{background:var(--l-card)}
.dl-row>.lt-ic{width:26px;height:26px;margin-top:1px;border-radius:7px}
.dl-row>.lt-ic .la-ph{border-radius:7px}
/* badge: hidden while queued, spinner while running, check when done, amber when it needs you */
.dl-row:not(.run):not(.ok):not(.need)>.lt-ic>i{display:none}
.dl-row.ok>.lt-ic>i{background:var(--l-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.3 5.1 8.1 8.8 4.2' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain}
.dl-row.ok>.lt-ic>i::before,.dl-row.need>.lt-ic>i::before{display:none}
.dl-row.need>.lt-ic>i{background:#E0A21B}
.dl-row:not(.run):not(.ok):not(.need){opacity:.55}
.dl-tx{flex:1;min-width:0}
.dl-tx>b{display:block;font-size:13.5px;font-weight:500;line-height:1.35}
.dl-sub{display:grid;margin-top:1px;font-size:12.5px;line-height:1.4}
.dl-sub>span{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s,transform .3s}
.dl-tool{color:var(--l-soft)}
.dl-out{color:#1E7A53;opacity:0;transform:translateY(3px)}
.dl-row.ok .dl-tool,.dl-row.need .dl-tool{opacity:0}
.dl-row.ok .dl-out,.dl-row.need .dl-out{opacity:1;transform:none}
.dl-row.need .dl-out{color:#8A5A0A}
.dl-row.need{background:#FBF4E4}
.dl-time{flex:none;margin-top:2px;font-size:11.5px;color:#9A938C;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s}
.dl-row.ok .dl-time,.dl-row.need .dl-time{opacity:1}
/* the live work under the running job */
.dl-live{height:0;overflow:hidden;opacity:0}
.dl-type{margin-top:8px;padding:8px 10px;border-radius:9px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring);font-size:12.5px;line-height:1.5;min-height:3.2em}
.dl-row.typing .cv-caret{display:inline-block}
.dl-call{display:flex;align-items:center;gap:10px;margin-top:8px;padding:6px 10px;border-radius:9px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring)}
.dl-call .la-wave{flex:1;height:22px;margin:0}
.dl-call time{font-size:12px;color:var(--l-soft);font-variant-numeric:tabular-nums}
.dl-leads{list-style:none;margin:8px 0 0;padding:4px 10px;border-radius:9px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring)}
.dl-leads li{display:flex;align-items:center;gap:8px;height:24px;font-size:12px}
.dl-leads li+li{border-top:.5px solid #EFEDEA}
.dl-leads b{font-weight:500}
.dl-leads em{font-style:normal;color:#9A938C}
.dl-leads li.ok .la-ok,.dl:not(.play) .dl-leads .la-ok{background:var(--l-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.3 5.1 8.1 8.8 4.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain;box-shadow:none}
/* Lindy reports back */
.dl-report{display:flex;align-items:flex-start;gap:10px;margin:0 6px 6px;padding:11px 12px;border-radius:10px;background:var(--l-card)}
.dl-report img{width:20px;height:20px;flex:none;border-radius:6px;margin-top:1px}
.dl-report p{font-size:13px;line-height:1.5}

/* recurring work: how often a job repeats; and the proactive suggestion that turns into a new routine */
.dl-t{display:flex;align-items:center;gap:7px;min-width:0}
.dl-t b{font-size:13.5px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-rep{display:inline-flex;align-items:center;gap:3px;flex:none;height:18px;padding:0 6px;border-radius:999px;background:#F1EEEA;color:var(--l-soft);font-size:10.5px;font-weight:500;white-space:nowrap}
.dl-rep svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dl-rep-new{background:#F1E8FA;color:var(--l-accent)}
.dl-new>.lt-ic img{width:100%;height:100%;border-radius:50%}
.dl-new{background:#FAF6FD}
.dl-idea{display:flex;align-items:flex-start;gap:10px;margin:0 6px 6px;padding:12px 12px 11px;border-radius:12px;background:#FAF6FD;box-shadow:inset 0 0 0 .5px rgba(142,78,198,.28)}
.dl-idea>img{width:22px;height:22px;flex:none;border-radius:50%;margin-top:1px}
.dl-idea-k{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--l-accent)}
.dl-idea-k span{display:grid;width:11px;height:11px}
.dl-idea-k svg{width:11px;height:11px;fill:currentColor}
.dl-idea p:not(.dl-idea-k):not(.dl-idea-act):not(.dl-idea-src){margin-top:3px;font-size:13px;line-height:1.5}
.dl-idea p.dl-idea-src{margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--l-soft)}
.dl-team{display:flex;margin-left:auto}
.dl-team img{width:20px;height:20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #fff}
.dl-team img+img{margin-left:-6px}
.dl-team+.dl-count{margin-left:10px}
/* Desktop hero: the window sits on painted art, like the Window hero and the rest of the page */
.hv-desktop .dk{padding:clamp(24px,2.6vw,40px);border-radius:28px;background:#F4C9A6 var(--art) 50% 42%/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(120,80,30,.12)}
.hv-desktop .dl{margin:0 auto;box-shadow:0 30px 60px -28px rgba(80,45,0,.55)}
@media (max-width:960px){.hv-desktop .dk{padding:20px 12px;border-radius:20px;margin-top:28px}}
.wheel-col .rn{transition:box-shadow .2s,background .2s,opacity .3s,left .35s cubic-bezier(.2,.7,.2,1)}
@media (min-width:961px){.about .trait::after{width:36%;height:27%;right:-9%;top:-7%}}
.la-who{display:block;font-size:11.5px;font-weight:600;line-height:1.3;color:var(--l-soft)}
.dl-idea-act{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;font-weight:500}
.dl-yes,.dl-no{padding:5px 10px;border-radius:8px;transition:transform .15s,background .2s}
.dl-yes{background:var(--l-ink);color:#fff}
.dl-yes.press{transform:scale(.95);background:#3A3632}
.dl-no{color:var(--l-soft);box-shadow:inset 0 0 0 .5px var(--l-ring)}
.dl-added{display:none;align-items:center;gap:5px;color:#1E7A53}
.dl-added svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dl-idea.accepted .dl-yes,.dl-idea.accepted .dl-no{display:none}
.dl-idea.accepted .dl-added{display:inline-flex}

/* ---------- C. CANVAS: one job, sent out from Lindy to four places and played through ---------- */
.cv{--l-bg:#F6F5F4;--l-ink:#1C1917;--l-mute:#56524D;--l-soft:#6D635B;--l-nav:#4E4D4B;--l-hover:rgba(0,0,0,.06);--l-ring:rgba(0,0,0,.12);--l-card:#F6F5F3;--l-accent:#8E4EC6;--l-green:#22A06B;
  position:relative;max-width:1200px;margin:clamp(32px,4.5vh,48px) auto 0;display:flex;flex-direction:column;align-items:center;text-align:left;color:var(--l-ink);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.cv p{text-wrap:wrap}
.cv::before{content:"";position:absolute;inset:-40px -10vw;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(15,30,46,.14) 1.1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.cv-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.cv-links path{fill:none;stroke:rgba(28,25,23,.14);stroke-width:1.4;transition:stroke .4s}
.cv.play .cv-links path:not(.flow):not(.done){stroke:transparent}
.cv-links path.flow{stroke:var(--l-accent);stroke-dasharray:5 6;animation:cvFlow .6s linear infinite}
.cv-links path.done{stroke:rgba(34,160,107,.5)}
@keyframes cvFlow{to{stroke-dashoffset:-11}}
/* the ask, Lindy, and her report sit down the middle */
.cv-ask,.cv-node,.cv-report,.cv-jobs,.cv-done,.cv-idea{position:relative;z-index:2}
/* the finish: every job runs back in to one finished job with its results, then the next idea */
.cv-done{margin-top:72px;width:min(640px,100%);padding:14px 16px 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring),0 16px 36px -18px rgba(60,40,10,.45);transition:box-shadow .5s}
.cv-done.final,.cv:not(.play) .cv-done{box-shadow:0 0 0 1.5px rgba(34,160,107,.55),0 0 0 7px rgba(34,160,107,.08),0 16px 36px -18px rgba(30,122,83,.45)}
.cv-done-h{display:flex;align-items:center;gap:10px}
.cv-done-ck{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--l-green);color:#fff}
.cv-done-ck svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cv-done-h b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.cv-done-h div span{display:block;font-size:12px;color:var(--l-soft)}
.cv-done-h .dl-rep{margin-left:auto}
.cv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.cv-stats p{padding:9px 11px;border-radius:10px;background:var(--l-card)}
.cv-stats b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.cv-stats span{display:block;margin-top:2px;font-size:11.5px;color:var(--l-soft)}
.cv-done .la-cal{margin-top:10px}
.cv .cv-idea{margin:14px 0 0;width:min(640px,100%);text-align:left}
.cv-links{transition:opacity .35s}
.cv.swept .cv-links{opacity:0}
.cv.swept .cv-job{pointer-events:none}
.cv-done-tools{display:flex;margin-left:auto}
.cv-done-tools>*{width:22px;height:22px;flex:none;border-radius:7px;background:#fff;box-shadow:0 0 0 1.5px #fff,0 0 0 2px var(--l-ring);object-fit:contain;padding:3px;box-sizing:border-box}
.cv-done-tools>*+*{margin-left:-5px}
.cv-done-tools .la-ph{display:grid;place-items:center;padding:0;background:#34C759}
.cv-done-tools .la-ph svg{width:12px;height:12px;fill:#fff}
.cv-done-tools+.dl-rep{margin-left:10px}
/* without the animation, show the finished state only */
.cv:not(.play) .cv-jobs,.cv:not(.play) .cv-links{display:none}
.cv:not(.play) .cv-done{margin-top:28px}
.cv-job .la-mini li b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-job .la-mini li em{flex:none;white-space:nowrap}
.cv-job .la-cal b,.cv-job .la-cal span{white-space:nowrap}
.cv-ask{width:min(440px,100%);display:flex;align-items:flex-start;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring),0 6px 18px -10px rgba(60,40,10,.3)}
.cv-ask img{width:22px;height:22px;flex:none;border-radius:6px;object-fit:cover}
.cv-ask p{font-size:13.5px;line-height:1.5}
.cv-node{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.cv-face{position:relative;width:60px;height:60px;border-radius:50%;display:grid;place-items:center}
.cv-face img{width:40px;height:40px;border-radius:10px}
.cv-face::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--l-accent);opacity:0}
.cv.play .cv-node:not(.final) .cv-face::after{animation:cvPing 1.6s ease-out infinite}
@keyframes cvPing{0%{opacity:.8;transform:scale(.92)}100%{opacity:0;transform:scale(1.25)}}
.cv-node b{display:block;font-size:13.5px;font-weight:600}
.cv-node span{display:block;font-size:12px;color:var(--l-soft)}
.cv-node.final span,.cv:not(.play) .cv-node span{color:#1E7A53}
.cv-report{margin-top:22px;width:min(480px,100%);padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring),0 10px 28px -14px rgba(60,40,10,.35);display:grid;gap:10px}
.cv-report .la-l{display:flex;align-items:flex-start;gap:10px}
.cv-report .la-l img{width:20px;height:20px;flex:none;border-radius:6px;margin-top:2px}
.cv-report .la-l p{font-size:13.5px;line-height:1.55}
.cv-report .lt{margin-left:30px}
/* the four jobs */
.cv-jobs{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:84px;align-items:stretch}
.cv-job{position:relative;padding:11px 12px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 .5px var(--l-ring),0 12px 30px -16px rgba(60,40,10,.4)}
.cv-job .lt{margin:0}
.cv-job .lt time{margin-left:auto;font-size:12px;color:var(--l-soft);font-variant-numeric:tabular-nums}
.cv-job .lt span[data-done]{font-size:12.5px;min-width:0}
.cv-job .lt b{white-space:nowrap}
.cv-mail{margin-top:10px;border-radius:10px;background:var(--l-card);padding:9px 11px 10px;font-size:12px;color:var(--l-nav)}
.cv-mail>p{display:flex;gap:8px;padding:2px 0}
.cv-mail>p>span:first-child{width:44px;flex:none;color:#9A938C}
.cv-body{display:block !important;margin-top:6px;padding-top:7px !important;border-top:.5px solid var(--l-ring);font-size:12.5px;line-height:1.5;color:var(--l-ink);min-height:4.5em}
.cv-caret{display:none;width:1.5px;height:13px;margin-left:1px;vertical-align:-2px;background:var(--l-accent);animation:cvBlink .8s steps(1) infinite}
.cv-job.typing .cv-caret{display:inline-block}
@keyframes cvBlink{50%{opacity:0}}
.cv-sent{display:inline-flex !important;align-items:center;gap:5px;margin-top:6px;padding:2px 8px !important;border-radius:999px;background:#E3F1DE;color:#1E7A53;font-weight:500}
.cv-sent svg{width:11px;height:11px;fill:currentColor}
.cv-say{display:grid;gap:5px;margin-top:8px;font-size:12px;line-height:1.45;color:var(--l-nav)}
.cv-say b{font-weight:600;color:var(--l-ink);margin-right:6px}
.cv-say .me b{color:var(--l-accent)}
.cv-job .la-wave{height:26px;margin-top:8px}
.cv-job .la-cal{margin-top:9px}
.cv-deals{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.cv-deals li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:9px;background:var(--l-card);font-size:12px}
.cv-deals b{font-weight:500}
.cv-deals em{font-style:normal;font-size:11px;font-weight:500;padding:2px 8px;border-radius:999px;background:#ECE9E5;color:var(--l-soft);transition:background .3s,color .3s}
.cv-deals em.on{background:#E3F1DE;color:#1E7A53}

/* the brand kit's circular avatar: it carries its own halo, so no extra frame or tile behind it */
.lindy-av{border-radius:50%;object-fit:cover}
.msg-av.lindy-av{background:none;box-shadow:none;border-radius:50%}
.built img.lindy-av,.sent-by img.lindy-av{width:16px;height:16px}
.la-brand img,.la-l img,.la-typing img,.cv-report .la-l img,.dl-report img{border-radius:50%}
.dl-face{border-radius:50%;box-shadow:none}
.cv-face img{width:100%;height:100%;border-radius:50%}
.hv .hi-face img{box-shadow:none}

/* ---------- tablets and phones: everything flows ---------- */
@media (max-width:1100px) and (min-width:961px){
  .la-side{width:190px}
  .cv-jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hv{padding:84px var(--gut) 24px}
  .hv-desktop{min-height:0}
  .hv-split{display:block}
  .hv-split #fHero.hv-copy{align-items:center;text-align:center;margin:0 auto}
  .hv-split .intro-cta{align-items:center}
  .hv-split .hero-actions{justify-content:center}
  .hv .logo-wall{margin-top:36px}
  /* A: just the thread, still in its window */
  .hv-scene{margin-top:32px;padding:22px 12px 0;border-radius:20px}
  .la-side{display:none}
  .la-body{height:520px;padding:0}
  .la-feed{padding:12px 14px 6px}
  .la-compose{width:calc(100% - 24px)}
  /* B: the checklist, full width */
  .dk{padding:28px 0 0}
  .dl{max-width:none}
  .dl-time{display:none}
  /* C: the same story, top to bottom */
  .cv{height:auto;margin-top:32px;display:flex;flex-direction:column;gap:12px}
  .cv::before,.cv-links{display:none}
  .cv-ask,.cv-report,.cv-done,.cv .cv-idea{width:100%;margin-top:0}
  .cv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-jobs{grid-template-columns:1fr;gap:12px;margin-top:0}
  .cv-node{flex-direction:row;justify-content:center;gap:12px;text-align:left;padding:4px 0;margin-top:0}
  .cv-face{width:44px;height:44px}
  .cv-face img{width:100%;height:100%}
}

/* the night and the morning say their piece in two lines each, so the two phones start level */
@media (min-width:961px){.cmp-day .cmp-line{max-width:440px;text-wrap:balance}}

/* phones: one wide, centred Hire button, the rating underneath */
@media (max-width:640px){
  #fHero .intro-cta{flex-direction:column;align-items:stretch;gap:14px;align-self:stretch;width:100%}
  #fHero .intro-cta .hero-actions{display:flex;width:100%;justify-content:center}
  #fHero .intro-cta .hero-actions .btn-lg{flex:1;justify-content:center;min-height:56px}
  #fHero .intro-cta .btn-text{display:none}
  #fHero .intro-proof{flex-direction:column;align-items:center}
  #fHero .intro-sub{margin-left:auto;margin-right:auto}
}

/* phones: trait cards as tall as their words, the headline just clear of the art; the face hero's button close to its line */
@media (max-width:760px){
  .trait{min-height:0}
  .trait h3{margin-top:56px}
}
@media (max-width:640px){
  .opening #fHero .intro-cta .hero-actions{margin-top:0}
}

.dl-in{display:flex;flex-direction:column}
.dl-in>.dl-idea{margin-top:auto}