/* GOJOB-494: the new landing page at /landing (views/site/landing.php). */
:root {
  --kale: #003d29;
  --carrot: #ffa323;
  --cantaloupe-20: #fff1e2;
  --spinach: #3a682f;
  --lime: #0aad0a;
  --cashew-100: #faf1e5;
  --cashew-80: #32302e;
  --cashew-60: #716c67;
  --cashew-025: #fefbf9;
  --page-max: 1440px;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cashew-100);
  color: var(--kale);
  font-family: "Geologica", sans-serif;
  font-weight: 400;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }

.container {
  width: min(100% - 2 * var(--gutter), 1240px);
  margin-inline: auto;
}

/* Hero background: aerial illustration, 2020px wide at 1440 and offset +84px like in the design; grows on wider screens so it always reaches the left edge. */
.top {
  position: relative;
  overflow: hidden;
}
.top::before {
  content: "";
  position: absolute;
  inset: 452px 0 0;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 240px), transparent); /* the section edge cuts the picture on most widths: fade it out instead of a hard line */
  mask-image: linear-gradient(#000 calc(100% - 240px), transparent);
  background: url("landing/hero-background-aerial.png") calc(50% + 84px) 0 / max(2020px, 100% + 168px) auto no-repeat;
}
.top > * { position: relative; }

/* Nav */
.nav { height: 60px; }
.nav__row {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}
.nav__logo { display: block; height: 32px; }
.nav__logo img { display: block; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 24.75px; /* the design tool rounds text widths up; this keeps links where the design has them */
  padding-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}
.nav__links a {
  position: relative;
  transition: color 300ms ease;
  color: var(--spinach);
  padding: 14px 12px; /* bigger hover area around the text (as .card__link); the negative margin keeps the layout where it was */
  margin: -14px -12px;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 12px; /* the underline stays under the text, not under the padding */
  right: 12px;
  bottom: 10px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a:hover,
.nav__links a:focus-visible { color: var(--lime); }
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) {
  .nav__links a, .nav__links a::after { transition: none; }
}
.btn-login, .footer__login {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--spinach);
  box-shadow: inset 0 0 0 1px var(--spinach);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 300ms;
}
/* circle-fill hover: a spinach circle grows from where the cursor enters (and shrinks to where it leaves); --x/--y/--d are set in index.html */
.btn-login::before, .footer__login::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--d, 150%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--spinach);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.btn-login:hover, .footer__login:hover { color: var(--cashew-100); }
.btn-login:hover::before, .footer__login:hover::before { transform: translate(-50%, -50%) scale(1); }

/* Menu button and panel, shown from 860px down instead of the links and Log in (see below). The three bars turn into a cross (open-close-menu-button, 21st.dev):
   the outer bars slide to the middle and spin to -45deg, the middle one to 45deg. Sizes are the design's 24px icon drawn at 20px. */
.nav { z-index: 5; }
.nav__scrim, .nav__tools { display: none; }
/* the button capsule stays on screen (fixed, top right) while the page scrolls; past the full logo a rabbit with a thin divider slides in beside the burger (.is-scrolled, landing.js) */
.nav__tools { position: fixed; top: 7px; right: var(--gutter); z-index: 5; transition: top 500ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s; }
.nav__pill { position: relative; z-index: 1; display: flex; align-items: center; height: 46px; /* as high as the orange buttons */ }
/* The capsule and the panel are drawn behind them as two blobs (.nav__goo): blurred and cut hard again by #nav-goo, so while the panel lifts away from the capsule a neck of liquid
   stretches between them and snaps. Two layers because the filter would blur a border away: -a is the ring colour, -b the fill, 1px smaller all round (padding + content-box). The text is not filtered. */
.nav__defs { position: absolute; width: 1px; height: 1px; overflow: hidden; } /* a 0-size svg is not rendered */
.nav__tools { --gap: 8; --ph: 0; --py: -8; --pr: 0; } /* the panel's height, lift and top corner radius (px): landing.js tweens them, the panel and both blobs read them */
.nav__goo, .nav__goo > div { position: absolute; inset: 0; pointer-events: none; }
.nav__goo > div { filter: url(#nav-goo); }
.nav__goo i { position: absolute; box-sizing: border-box; background: #e1d9ce; }
.nav__goo i:first-child { inset: 0; border-radius: 8px; }
.nav__goo-b i { padding: 1px; background: #fff; background-clip: content-box; }
.nav__goo-b i:last-child { background-color: var(--cashew-025); }
.nav__mark {
  display: flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 100%; max-width: 0; overflow: hidden; opacity: 0; visibility: hidden;
  box-shadow: inset -1px 0 0 #e1d9ce; /* the divider, not a border: a border would keep 1px of width while the rabbit is hidden */
  transition: max-width 300ms cubic-bezier(.16, 1, .3, 1), opacity 200ms, visibility 0s 300ms;
}
.nav__mark svg { display: block; flex: none; height: 28px; width: auto; overflow: visible; } /* the product's hare (assets/rabbit-run.js): it runs while the page scrolls, landing.js. 28px in the 46px block */
.rabbit-run path { fill: var(--carrot); }
.nav.is-scrolled .nav__mark { max-width: 46px; opacity: 1; visibility: visible; transition-delay: 0s; }
.nav__mark:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; border-radius: 8px; }
.nav__scrim {
  position: fixed; inset: 0; z-index: 4; background: rgba(0, 30, 20, 0.6); opacity: 0; visibility: hidden;
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: opacity 300ms ease, -webkit-backdrop-filter 300ms ease, backdrop-filter 300ms ease, visibility 0s 300ms;
} /* dark green (kale, darker) and a blur behind the open menu; a click on it closes the menu */
.nav.is-open .nav__scrim { opacity: 1; visibility: visible; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition-delay: 0s; }
.nav__menu { display: none; }
.nav__burger {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 8px; background: none;
  color: var(--spinach); cursor: pointer; /* the colour of the header links and Log in */
}
.nav__burger:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.nav__burger-icon { position: relative; width: 20px; height: 20px; pointer-events: none; }
.nav__burger-icon i {
  position: absolute; left: 1.67px; top: 9.17px; width: 16.67px; height: 1.67px; border-radius: 1px; background: currentColor;
  transition: translate 300ms cubic-bezier(.5, .85, .25, 1.1), rotate 300ms cubic-bezier(.5, .85, .25, 1.1), scale 300ms cubic-bezier(.5, .85, .25, 1.1);
}
.nav__burger-icon i:nth-child(1) { translate: 0 -5px; }
.nav__burger-icon i:nth-child(2) { transition-timing-function: cubic-bezier(.5, .85, .25, 1.8); }
.nav__burger-icon i:nth-child(3) { translate: 0 5px; }
.nav__burger[aria-expanded="true"] i { translate: 0 0; scale: .95 1; }
.nav__burger[aria-expanded="true"] i:nth-child(1) { rotate: 315deg; }
.nav__burger[aria-expanded="true"] i:nth-child(2) { rotate: 45deg; }
.nav__burger[aria-expanded="true"] i:nth-child(3) { rotate: 135deg; }
/* The panel opens like the FAQ accordion (landing.js, the same springs): closed, it is a zero-height strip flush under the button (--gap = the space it opens up to, px) with square
   top corners; opening, its height, the gap and the top corners (to the button's 8px) ride on springs, so it grows out of the button and detaches from it. */
.nav__menu, .nav__goo i:last-child { /* the panel and its two blobs: the same box, from --ph, --py, --pr (landing.js) */
  position: absolute; top: calc(100% + var(--gap) * 1px); right: 0; width: min(360px, 100vw - 2 * var(--gutter)); height: calc(var(--ph) * 1px);
  border-radius: calc(var(--pr) * 1px) calc(var(--pr) * 1px) 8px 8px; transform: translateY(calc(var(--py) * 1px));
}
.nav__menu {
  overflow: hidden; box-shadow: 0 12px 32px rgba(58, 53, 32, 0.12); /* no fill of its own: the blobs behind it are the panel */
  visibility: hidden; /* the links of a closed menu are not reachable by Tab */
}
.nav__menu-in { padding: 12px 12px 24px; opacity: 0; }
.nav__menu a:not(.nav__login) {
  display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 12px;
  font-size: 16px; font-weight: 500; color: var(--spinach); transition: color 300ms ease;
}
.nav__menu a:not(.nav__login):hover, .nav__menu a:not(.nav__login):focus-visible { color: var(--lime); }
.nav__menu a span { position: relative; }
.nav__menu a span::after { /* as .nav__links a::after, but under the word, not the whole row */
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__menu a:hover span::after, .nav__menu a:focus-visible span::after { transform: scaleX(1); transform-origin: left; }
.nav__login {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 12px 0; padding: 12px 20px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--spinach); color: var(--spinach); font-size: 14px; font-weight: 500; line-height: 18px;
  position: relative; isolation: isolate; overflow: hidden; transition: color 300ms;
}
.nav__login::before {
  content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: var(--d, 150%); aspect-ratio: 1; border-radius: 50%;
  background: var(--spinach); transform: translate(-50%, -50%) scale(0); transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.nav__login:hover { color: var(--cashew-100); }
.nav__login:hover::before { transform: translate(-50%, -50%) scale(1); }
.nav__burger { transition: color 300ms ease; }
.nav__burger:hover { color: var(--lime); }
@media (prefers-reduced-motion: no-preference) { .nav__tools { animation: fade-in .7s ease-out .95s both; } } /* arrives with the logo (same delay as the menu reveal in landing.js) */
@media (prefers-reduced-motion: reduce) { .nav__burger-icon i, .nav__menu a, .nav__menu a span::after, .nav__login, .nav__login::before, .nav__burger, .nav__mark, .nav__scrim { transition: none; } }

.nav__now { display: none; } /* up to 860px the capsule stays two squares */

/* Up to 860px (the six links need about 830) the menu button takes the place of the links and Log in: the sections and Log in are in its panel. */
@media (max-width: 860px) {
  .nav__links, .btn-login { display: none; }
  .nav__tools { display: flex; }
  .nav__scrim, .nav__menu { display: block; }
}

/* Where the full menu fits (861px and up) the same capsule is a dock at the top centre: it slides down once the visitor has scrolled one screen (.nav.is-far, landing.js) and opens the
   same panel under it. It moves with `top`. */
@media (min-width: 861px) {
  .nav__tools {
    display: flex; top: -70px; right: 0; left: 0; width: fit-content; margin-inline: auto; animation: none;
    opacity: 0; visibility: hidden; transition: top 800ms cubic-bezier(.4, 0, .2, 1), opacity 700ms ease-in-out, visibility 0s 800ms; /* leaving: slow and even, not the sharp ease-out of the entrance */
  }
  .nav.is-far .nav__tools { top: 12px; opacity: 1; visibility: visible; transition: top 500ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s; } /* arriving */
  .nav__mark { max-width: 46px; opacity: 1; visibility: visible; }
  /* which section the visitor is in (landing.js): sized like the header's Log in button, 42px high, 14px / 500; the width is fixed, so the dock does not shift when the word changes */
  .nav__now {
    display: flex; align-items: center; justify-content: center; flex: none; width: 0; height: 100%; overflow: hidden; white-space: nowrap; opacity: 0;
    padding: 0; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--spinach); box-shadow: inset -1px 0 0 #e1d9ce; cursor: pointer;
    transition: width 300ms cubic-bezier(.16, 1, .3, 1), opacity 200ms, color 300ms ease;
  }
  .nav__now.has-text { width: 136px; opacity: 1; }
  .nav__now:hover { color: var(--lime); }
  .nav__now span { position: relative; }
  .nav__now span::after { /* the same underline as the links: runs in from the left on hover */
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: right; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav__now:hover span::after { transform: scaleX(1); transform-origin: left; }
  .nav__scrim, .nav__menu { display: block; }
  .nav__menu, .nav__goo i:last-child { right: auto; left: 50%; margin-left: -114px; width: 228px; } /* as wide as the dock with a section name: 46 + 136 + 46 */
}
/* Past the FAQ (.is-end, landing.js) the capsule goes back up: the footer has every link of its menu. Same slow leaving as the dock's, on a phone too. */
.nav.is-end .nav__tools { top: -70px; opacity: 0; visibility: hidden; animation: none; transition: top 800ms cubic-bezier(.4, 0, .2, 1), opacity 700ms ease-in-out, visibility 0s 800ms; }
@media (min-width: 861px) and (prefers-reduced-motion: reduce) { .nav__tools, .nav.is-far .nav__tools, .nav.is-end .nav__tools, .nav__now, .nav__now span::after { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .btn-login, .btn-login::before, .footer__login, .footer__login::before { transition: none; }
}

/* Hero */
.hero { padding-top: 72px; }
.hero__row {
  display: flex;
  justify-content: space-between;
  padding-block: 10px;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 670px;
}
h1 {
  font-size: 56px;
  font-weight: 600;
  line-height: 61px;
  letter-spacing: -1.12px;
}
.hero__copy p {
  width: 550px;
  color: var(--cashew-80);
  font-size: 16px;
  line-height: 1.58;
}

/* Sign-up card */
.signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: fit-content; /* as wide as the legal line below (nowrap) */
  padding: 24px 20px 18px;
  background: var(--cashew-025);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #f0ece6, 0 12px 32px rgba(58, 53, 32, 0.05);
}
.signup h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  align-self: stretch; /* the card's width, not the text's: SplitText (landing.js) re-splits the lines only when this box changes width */
  text-align: center;
}
.signup h2 > div { text-align: center !important; } /* SplitText puts text-align: start on every line it makes */
.signup__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.oauth--google { background: #fbbc05; border-color: #fbbc05; color: #202124; }
.oauth--linkedin { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.oauth--email { background: #fff; border-color: #d7cfc4; color: var(--cashew-80); }
/* hover: a translucent white circle grows from the pointer behind the text (same --x/--y/--d script as .btn-login). The 1px border is dropped (it matched the fill) so the circle covers the whole button */
.oauth--google, .oauth--linkedin, .oauth--email { position: relative; isolation: isolate; overflow: hidden; }
.oauth--google, .oauth--linkedin { border: 0; }
.oauth--google::before, .oauth--linkedin::before, .oauth--email::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--d, 150%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.oauth--email::before { background: var(--cantaloupe-20); }
.oauth--google:hover::before, .oauth--linkedin:hover::before, .oauth--email:hover::before { transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .oauth::before { transition: none; } }
.oauth__badge {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 4px;
}
.oauth__badge img { display: block; }

.signup__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--cashew-60);
}
.signup__foot p {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
.signup__login { gap: 6px; }
.signup__legal { gap: 4px; margin-top: 2px; }
.signup__foot a {
  position: relative;
  display: inline-block;
  color: var(--spinach);
  transition: color 300ms ease;
}
/* underline is at rest and slides out to the right on hover, then slides back in from the left */
.signup__foot a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.signup__foot a:hover,
.signup__foot a:focus-visible { color: var(--lime); }
.signup__foot a:hover::after,
.signup__foot a:focus-visible::after { transform: scaleX(0); transform-origin: right; }
@media (prefers-reduced-motion: reduce) {
  .signup__foot a, .signup__foot a::after { transition: none; }
}
.signup__login { font-size: 12px; line-height: 1.4; }
.signup__legal { font-size: 12px; line-height: 1.4; }

/* Laptop screen */
.laptop { padding-block: 56px; perspective: 1500px; perspective-origin: 50% 48%; }
.laptop__frame {
  /* tilt follows the cursor, driven by --px/--py from the script in index.html (same numbers as viewport.theresonance.studio) */
  transform: rotateX(calc(var(--py, 0) * 1.8deg)) rotateY(calc(var(--px, 0) * -2.8deg));
  transform-style: preserve-3d;
  transform-origin: 50% 48%;
  transform-style: preserve-3d;
  will-change: transform;
  padding: 10px;
  background: #decbb1;
  border-radius: 30px;
  box-shadow: 0 12px 32px rgba(58, 53, 32, 0.1), inset 0 0 0 1px #b9b49f;
}
.screen { position: relative; transform-style: preserve-3d; aspect-ratio: 1340 / 824; --k: 1; }
/* Blocks sit exactly on the base at rest; tilt pulls them apart in depth and each drifts on its own. scale() cancels the perspective growth of translateZ. */
.screen .block {
  pointer-events: none; /* the three blocks overlap edge to edge; only .hs-job takes clicks */
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--px, 0) * var(--mx, 0) * 1px), calc(var(--py, 0) * var(--my, 0) * 1px), calc(var(--z) * 1px)) scale(calc(1 - var(--z) / 1500));
}

/* The dashboard itself is live HTML (not a screenshot): drawn at 1340x824, scaled to the frame with --k so text stays vector. Tokens as in the product. */
.hs-base, .hs-stage { width: 1340px; height: 824px; font: 400 14px/1.2 "Geologica", sans-serif; color: var(--cashew-80); white-space: nowrap; user-select: none; }
.hs-base { color: var(--kale); position: absolute; inset: 0; transform: scale(var(--k)); transform-origin: 0 0; background: var(--cashew-100); border-radius: 22px; overflow: hidden; }
.hs-stage { position: absolute; left: 0; top: 0; transform: scale(var(--k)); transform-origin: 0 0; }
.hs-base *, .hs-stage * { box-sizing: border-box; }
.hs-base b, .hs-stage b { font-weight: 600; }
.hs-base i, .hs-stage i, .hs-base em, .hs-stage em { font-style: normal; }
.hs-stage .ic, .hs-base .ic { width: 18px; height: 18px; }
.hs-btn .ic { width: 16px; height: 16px; }
.hs-stage [class], .hs-base [class] { position: absolute; }
.hs-stage .ic, .hs-base .ic, .hs-stage .hs-dot, .hs-stage .hs-ring svg, .hs-stage .hs-ring b, .hs-stage .hs-tag, .hs-stage .hs-tag .ic, .hs-stage .hs-select svg { position: static; }

.hs-nav { position: absolute; left: 0; top: 0; width: 1340px; height: 54px; background: var(--kale); color: var(--cashew-100); font-weight: 470; }
.hs-nav__logo { left: 40px; top: 11px; width: 144px; height: 32px; }
.hs-nav__menu { left: 213px; top: 0; height: 54px; display: flex; gap: 5px; }
.hs-nav__item { position: relative !important; display: flex; align-items: center; gap: 5px; padding: 0 12px; height: 54px; }
.hs-nav__item .ic { width: 20px; height: 20px; }
.hs-nav__item.hs-on { color: var(--carrot); }
.hs-nav__item.hs-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--carrot); }
.hs-nav__item.hs-on .ic { -webkit-mask-image: var(--ic-f, var(--ic-l)); mask-image: var(--ic-f, var(--ic-l)); }
.hs-nav__user { left: 1110px; top: 0; height: 54px; display: flex; align-items: center; }
.hs-nav__user > * { position: relative !important; }
.hs-nav__carrots { font-size: 18.5px; font-weight: 700 !important; color: var(--carrot); }
.hs-nav__user > img[src$="carrot.svg"] { width: 20px; height: 20px; margin: 0 10px 0 3px; }
.hs-nav__bell { width: 20px; height: 20px; margin-right: 14.5px; }
.hs-nav__bell .ic { width: 20px; height: 20px; }
.hs-nav__bell em { position: absolute !important; left: 10px; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--carrot); color: var(--kale); font: 700 10px/16px "Geologica", sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--kale); }
.hs-nav__avatar { width: 28px; height: 28px; margin-right: 8px; }
.hs-nav__name { font-size: 13.7px; }
.hs-ptitle { left: 40px; top: 76px; margin: 0; font: 600 25.5px/32px "Geologica", sans-serif; }
.hs-pcount { left: 206px; top: 88px; color: var(--cashew-60); line-height: 18px; }
.hs-pscan { left: 999px; top: 81px; font-size: 12px; line-height: 16px; color: var(--cashew-60); }

.hs-btn, .hs-strip, .hs-card, .hs-posted { background: #fff; box-shadow: inset 0 0 0 1px #efe6da; }
.hs-btn { display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; font-weight: 500; }
.hs-btn.hs-search { justify-content: flex-start; gap: 6px; padding-left: 12px; font-weight: 400; font-size: 14.2px; color: var(--cashew-60); }
.hs-strip { left: 40px; top: 124px; width: 1264px; height: 56px; border-radius: 15px; }
.hs-st { top: 0; height: 56px; display: flex; align-items: center; gap: 6px; color: var(--cashew-60); font-size: 14.4px; }
.hs-st b { margin-left: 12px; color: var(--cashew-80); font-size: 17px; }
.hs-st .hs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 1.5px; }
.hs-st--on { left: 122px; top: 4px; width: 248px; height: 48px; border-radius: 10px; background: #f9fb93; color: var(--kale); padding-left: 13.5px; }
.hs-st--on b { position: absolute; right: 14px; color: var(--kale); }
.hs-sep { top: 14px; width: 1px; height: 28px; background: #e6ddd0; }

.hs-card { border-radius: 16px; overflow: hidden; }
.hs-jobs { left: 40px; top: 259px; width: 379px; height: 525px; }
.hs-jobs__bar { left: 0; top: 0; width: 379px; height: 55px; background: #fdf8f2; }
.hs-sort__l { left: 18px; top: 16.5px; color: var(--cashew-60); line-height: 20px; }
.hs-select { left: 55px; top: 9px; width: 148px; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 13px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #d8d0c4; }
.hs-select svg { width: 9px; height: 6px; color: var(--cashew-60); }
.hs-check { left: 223px; top: 18px; width: 17px; height: 17px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #d8d0c4; }
.hs-check__l { left: 249px; top: 16.5px; line-height: 20px; }
.hs-help { left: 343px; top: 16px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px #d8d0c4; color: var(--cashew-60); font-size: 12px; line-height: 20px; text-align: center; }
.hs-jobs__day { left: 0; top: 0; width: 379px; height: 40px; background: #efe1cf; color: var(--cashew-60); font-size: 13px; line-height: 40px; }
.hs-jobs__day span { position: absolute !important; }
.hs-jobs__day span:first-child { left: 17px; display: flex; gap: 8px; }
.hs-jobs__day span:last-child { right: 17px; font-size: 12px; }
.hs-jobs__day b { color: var(--cashew-80); }
.hs-job { left: 0; width: 379px; height: 114px; border-bottom: 1px solid #efe6da; }
.hs-job--on { background: #ffe4c5; box-shadow: inset 2px 0 0 var(--carrot); }
.hs-job__dot { left: 7px; top: 28px; width: 5px; height: 5px; border-radius: 50%; background: var(--carrot); }
.hs-job__logo { left: 18px; top: 13px; width: 38px; height: 38px; border-radius: 10px; }
.hs-logo--pad { padding: 4px; background: #fff; box-shadow: inset 0 0 0 1px #efe6da; }
.hs-job__t { left: 69px; top: 10px; font-size: 15px; line-height: 20px; }
.hs-job__c { left: 69px; top: 32px; color: var(--cashew-60); font-size: 13.5px; line-height: 20px; }
.hs-job__s { display: flex; gap: 4.5px; left: 69px; top: 57px; color: var(--cashew-60); font-size: 13px; line-height: 20px; }
.hs-job__s b { color: var(--cashew-80); }
.hs-job__tags { left: 69px; top: 83px; display: flex; gap: 7px; }
.hs-tag { display: flex; align-items: center; gap: 4.5px; height: 20px; padding: 0 7px 0 9.5px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.hs-tag .ic { width: 10.5px; height: 10.5px; }
.hs-tag--top { background: #c5ff96; }
.hs-tag--new { background: #f9fb93; }
.hs-ring { right: 17px; top: 12px; width: 38px; height: 38px; display: grid; place-items: center; }
.hs-ring svg { position: absolute !important; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 3.2; }
.hs-ring circle { stroke: #e1d9ce; }
.hs-ring circle.hs-v { stroke: var(--c); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.hs-ring b { font-size: 14px; line-height: 1; color: var(--kale); }

.hs-detail { left: 437px; top: 259px; width: 863px; height: 525px; }
.hs-detail__added { left: 28px; top: 30px; color: var(--cashew-60); font-size: 13px; line-height: 18px; }
.hs-detail__status { left: 769px; top: 29px; display: flex; align-items: center; gap: 7px; font-weight: 500; line-height: 18px; }
.hs-detail__status .hs-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c); background: #fff; }
.hs-detail__logo { left: 28px; top: 56px; width: 48px; height: 48px; border-radius: 12px; }
.hs-detail__t { color: var(--kale); left: 91px; top: 65px; font-size: 21.5px; line-height: 30px; }
.hs-detail__no { left: 513px; top: 62px; width: 157px; height: 37px; font-size: 13.8px; }
.hs-detail__yes { color: var(--kale); left: 678px; top: 62px; width: 156px; height: 37px; font-size: 13.8px; background: #dbef77; box-shadow: none; }
kbd { display: inline-flex !important; position: static !important; align-items: center; justify-content: center; width: 20px; height: 18px; margin-left: 4px; border-radius: 5px; color: var(--cashew-60); box-shadow: inset 0 0 0 1px #c9c2b8; padding-top: 2px; font: 500 10.5px/1 "Geologica", sans-serif; }
.hs-detail__yes kbd { color: var(--kale); box-shadow: inset 0 0 0 1.2px var(--kale); }
.hs-detail__co { left: 28px; top: 117px; color: var(--cashew-60); font-size: 14.1px; line-height: 20px; }
.hs-detail__co u { color: var(--spinach); text-decoration: none; }
.hs-detail__pay { right: 30px; top: 116px; font-size: 16.8px; line-height: 22px; }
.hs-fit { left: 29px; top: 159px; width: 805px; height: 184px; border-radius: 14px; background: #fdf8f2; }
.hs-fit__h { left: 20px; top: 21px; display: flex; align-items: baseline; gap: 8px; }
.hs-fit__t { position: static !important; color: var(--kale); font-size: 17.8px; line-height: 22px; }
.hs-fit__m { position: static !important; color: var(--cashew-60); font-size: 14px; line-height: 18px; }
.hs-fit__p { left: 20px; top: 55px; width: 670px; margin: 0; white-space: normal; color: var(--cashew-80); font-size: 14px; line-height: 20px; }
.hs-fit__again { left: 20px; top: 126px; width: 126px; height: 36px; font-size: 13.9px; background: #fff; box-shadow: inset 0 0 0 1px #d8d0c4; }
.hs-ring--big { left: 724px; right: auto; top: 21px; width: 59px; height: 59px; }
.hs-ring--big svg { stroke-width: 3; }
.hs-ring--big b { display: flex; flex-direction: column; align-items: center; font-size: 19px; line-height: 1; }
.hs-ring--big small { font: 500 9px/1 "Geologica", sans-serif; margin-top: 2px; }
.hs-posted { left: 29px; top: 360px; width: 805px; height: 60px; border-radius: 12px; box-shadow: inset 0 0 0 1px #d8d0c4; }
.hs-posted__y { left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 8px; background: #ff6600; color: #fff; font: 500 22px/32px "Geologica", sans-serif; text-align: center; }
.hs-posted b { position: absolute; left: 62px; top: 12px; font-size: 14.1px; line-height: 20px; }
.hs-posted span:not(.hs-posted__y) { position: absolute; left: 62px; top: 31px; color: var(--cashew-60); font-size: 13px; line-height: 18px; }
.hs-posted em { position: absolute; right: 19px; top: 20px; display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14.2px; line-height: 20px; }
.hs-posted em .ic { width: 15px; height: 15px; }
.hs-tabs { left: 28px; top: 449.5px; width: 806px; height: 40px; border-bottom: 1px solid #e6ddd0; color: var(--cashew-60); font-size: 14px; }
.hs-tabs span { position: absolute !important; padding: 9px 8px 0; height: 40px; }
.hs-tabs .hs-on { color: var(--spinach); font-weight: 600; box-shadow: inset 0 -2px 0 var(--spinach); }

/* Sources */
/* One pinned scene holds both screens (sources, then open jobs). The section is 3.5 viewports tall, its content stays fixed to the viewport while the script (end of index.html)
   plays the counters and chips: 30+ counts up, scrolls away upwards while the 17,000+ block rides in from below and counts, then the pin releases.
   Timing lives in the script (u = viewports scrolled since the pin locked); the height here must stay in step with it.
   Chip pop-in = paypath.ai cards: opacity 0→1 + scale .9→1, .6s, cubic-bezier(.6, 0, .05, 1). */
.scene--anim { height: 350vh; }
.scene--anim .sources__pin { display: grid; position: sticky; top: 0; height: 100vh; overflow: clip; } /* chips are cut by the window edges, not by an invisible box */
.scene--anim .stage { grid-area: 1 / 1; pointer-events: none; } /* both screens share the pin; only the button stays clickable */
.scene--anim .counter__cta { pointer-events: auto; }
.counter > .card-tilt { align-self: center; margin: 24px 0 -14px; pointer-events: auto; } /* tilt wrapper (same as the cards): it takes over the centring and the margins the button had */
.counter > .card-tilt .counter__cta { margin: 0; }
.scene--anim .panel { overflow: visible; width: 100%; height: 100%; } /* full-bleed: chips (positioned in %) spread over the whole screen, not just the 1240px column */
/* Fly-in field (like annnimate.com Image Fly-In): every chip loops from deep inside the page toward the viewer, fading in and out, on a perspective panel
   whose vanishing point follows the cursor. The loop never stops; the entry pop-in is done by filter/scale, so it doesn't fight the transform animation. */
.scene--anim .panel { perspective: 900px; perspective-origin: calc(50% + var(--px, 0) * 8.4%) calc(50% + var(--py, 0) * 8.4%); } /* --px/--py from the script in index.html; no CSS transition (it restarted on every mouse move and stuttered) */
.scene--anim .chip {
  animation: fly 18s linear infinite paused; /* 12s of flight + 6s pause, so only ~2/3 of the chips are on screen at once */
  animation-delay: calc(var(--i) * -18s / var(--n));
  translate: calc(var(--px, 0) * var(--k, 1) * -27.6px) calc(var(--py, 0) * var(--k, 1) * -18px); /* parallax at every depth: big/near chips drift more than small/far ones, also while they sit at z=0 (the vanishing point alone does not move those) */
  transition: filter .6s cubic-bezier(.6, 0, .05, 1) var(--d, 0s), scale .6s cubic-bezier(.6, 0, .05, 1) var(--d, 0s);
}
.scene--anim .chip.is-in { animation-play-state: running; }
.scene--anim .chip:not(.is-in), .scene--anim .chip.is-out { filter: opacity(0); scale: .9; }
/* --ox/--oy = the chip's offset from the panel centre (set by the script). The extra outward shift at the far end cancels the perspective pull toward the
   vanishing point, so chips grow in place around a clear centre instead of crossing the counter. */
@keyframes fly {
  0% { transform: translate3d(calc(var(--jx, 0px) + var(--ox, 0px)), calc(var(--jy, 0px) + var(--oy, 0px)), -900px); opacity: 0; }
  12% { opacity: 1; }
  48% { transform: translate3d(var(--jx, 0px), var(--jy, 0px), 0); opacity: 1; }
  67%, 100% { transform: translate3d(var(--jx, 0px), var(--jy, 0px), 500px); opacity: 0; }
}
.panel {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 690px;
  overflow: hidden;
}
.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.counter__number { height: 160px; }
.counter__num { position: relative; display: block; } /* the "+" hangs off the right edge, so the digits stay centred over the caption */
.counter__val {
  display: block;
  font-size: 160px;
  font-weight: 500;
  line-height: 160px;
  letter-spacing: -8px;
  font-variant-numeric: tabular-nums;
}
.cd { position: relative; display: inline-block; }
.cd__out { position: absolute; left: 0; top: 0; }
.counter__plus {
  position: absolute;
  left: 100%;
  top: 0;
  color: var(--carrot);
  font-size: 120px;
  font-weight: 300;
  line-height: 120px;
}
.counter__caption {
  font-size: 38px;
  font-weight: 600;
  line-height: 47.5px;
  letter-spacing: -0.5px;
}
.counter .counter__cta, .final .counter__cta { margin-top: 24px; padding: 14px 20px; line-height: 18px; font-size: 14px; font-weight: 500; background: var(--carrot); border-radius: 8px; color: var(--kale); position: relative; isolation: isolate; overflow: hidden; } /* reuses .step__cta layout: filled carrot, same size as Log in */
.counter__cta::before { /* hover bubble like Log in: grows from the pointer, a lighter carrot */
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--d, 150%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--carrot) 72%, #fff);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
.counter__cta:hover::before { transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .counter__cta::before { transition: none; } }
.br-phone { display: none; } /* a forced line break (an empty block, not a <br>: SplitText turns every <br> into a break, hidden or not), on a phone only */
.counter__sub {
  width: 430px;
  color: var(--cashew-60);
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--pad);
  background: #fff;
  border-radius: calc(20px * var(--k, 1)); /* the whole card scales with --k: radius and shadow too, so every chip has the same shape */
  box-shadow: inset 0 0 0 1px var(--cashew-025), 0 calc(12px * var(--k, 1)) calc(32px * var(--k, 1)) rgba(58, 53, 32, 0.05);
  font-size: var(--fs);
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: normal;
  white-space: nowrap;
}
.chip__icon {
  flex: none;
  width: var(--icon);
  height: var(--icon);
  border-radius: var(--ir);
  overflow: hidden;
}
.chip__icon img { display: block; width: 100%; height: 100%; } /* square icons are pre-filled edge to edge (assets/company-logos/square), no backdrop */
.chip > img { display: block; width: auto; height: calc(42px * var(--k)); }
.chip:has(> img) { padding: calc(18px * var(--k)) calc(26px * var(--k)); } /* sources chips: logo only, --k = depth scale */
.chip--indeed { left: 3%; top: 5%; --k: 1.3; }
.chip--greenhouse { left: 70%; top: 34%; --k: 1.1; }
.chip--workday { left: 68%; top: 4%; --k: 1.3; } .chip--workday > img { height: calc(56px * var(--k)); }
.chip--justjoin { left: 33%; top: 5%; --k: 0.75; }
.chip--personio { left: 14%; top: 51%; --k: 0.8; }
.chip--smartrecruiters { left: 3%; top: 66%; --k: 0.9; }
.chip--remotive { left: 70%; top: 63%; --k: 0.88; }
.chip--lever { left: 30%; top: 86%; --k: 0.85; }
.chip--adzuna { left: 48%; top: 82%; --k: 1; }
.chip--ashby { left: 3%; top: 36%; --k: 1.05; }
.chip--djinni { left: 80%; top: 78%; --k: 0.85; }
.chip--remoteok { left: 82%; top: 20%; --k: 0.7; }
.chip--workable { left: 15%; top: 80%; --k: 0.6; }
.chip--theprotocol { left: 16%; top: 22%; --k: 0.6; }
.chip--bulldogjob { left: 48%; top: 12%; --k: 0.6; }
.chip--rocketjobs { left: 82%; top: 50%; --k: 0.6; }

/* Vacancies */
.vacancies { padding: 40px 0 120px; }
.scene--anim .vacancies { padding: 0; }
.job { --pad: calc(17px * var(--k)) calc(30px * var(--k)) calc(17px * var(--k)) calc(17px * var(--k)); --gap: calc(17px * var(--k)); --icon: calc(60px * var(--k)); --ir: calc(15px * var(--k)); --ts: calc(19px * var(--k)); --ms: calc(17px * var(--k)); --ig: calc(4px * var(--k)); } /* depth scale --k set per card */
.job { font-size: var(--ms); font-weight: 400; letter-spacing: 0; color: var(--cashew-60); }
.job__info { display: flex; flex-direction: column; gap: var(--ig); }
.job__info b {
  color: var(--kale);
  font-size: var(--ts);
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Silence */
.silence {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 160px 0 200px;
}
.silence h2 {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  text-align: center;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.card-tilt { /* tilt follows the cursor over the card, driven by --px/--py from the script in index.html (same angles as .laptop__frame); the tilt sits on this wrapper so it does not fight the card's own reveal transform */
  transform: perspective(1500px) rotateX(calc(var(--py, 0) * -8deg)) rotateY(calc(var(--px, 0) * 8deg)) translate3d(0, 0, 100px) scale(calc(1 - 100 / 1500)); /* card-7 effect (21st.dev): max 8deg, the side under the cursor presses in; floats 100px above the page, scale() cancels the perspective growth */
  transform-origin: 50% 48%;
  will-change: transform;
  transition: scale .5s cubic-bezier(.16, 1, .3, 1); /* the individual scale property composes with the tilt transform, so the tilt (set every frame by the script) is not slowed down by this transition */
}
@media (min-width: 961px) and (hover: hover) { .card-tilt:hover { scale: 1.05; } }
.card { transform-style: preserve-3d; }
.card__top, .card__link { transform: translateZ(40px) scale(calc(1 - 40 / 1500)); } /* content floats 40px above the card face (card-7 depth); scale() cancels the perspective growth so it rests where Figma has it */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  height: 400px;
  padding: 36px;
  background: #fff;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--cashew-025), 0 12px 32px rgba(58, 53, 32, 0.05);
}
.card__top { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 22px; } /* icon at the top, text pushed down to the link */
.card__top img { display: block; }
.card__media { position: relative; width: 108px; height: 108px; }
.card__media video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; pointer-events: none; } /* hover video sits exactly over the still (same first frame) and fades in while the card is hovered (landing.js) */
.card__media video.on { opacity: 1; }
@media (max-width: 760px) { .card__media { width: 76px; height: 76px; flex: none; } } /* the same 76px as the still on phones */
@media (min-width: 961px) { .card__media { margin-left: -10px; } .card-tilt:nth-child(2) .card__media { margin-left: -5px; } } /* the stills have empty space on the left; this lines the picture up with the text */
.card__text { display: flex; flex-direction: column; gap: 8px; color: var(--cashew-80); }
.card h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.card__text p { opacity: 0.7; font-size: 16px; line-height: 1.4; }
.card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  align-self: flex-start; /* only as wide as its content, so the underline doesn't span the whole card */
  color: var(--spinach);
  font-size: 17px;
  font-weight: 500;
  transition: color 300ms ease;
  padding: 14px 20px; /* bigger hover area around the text; the negative margin keeps the layout where it was */
  margin: -14px -20px;
}
/* same hover as the menu: colour to lime, an underline (under the text only, not the arrow) slides in from the left and leaves to the right */
.card__link > span { position: relative; } /* direct child only: the words inside it are spans too */
.card__link > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card__link:hover,
.card__link:focus-visible { color: var(--lime); }
.card__link:hover > span::after,
.card__link:focus-visible > span::after { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .card__link, .card__link > span::after { transition: none; } }

/* Steps */
.steps {
  display: flex;
  flex-direction: column;
  padding: 40px 0 120px;
  background: var(--kale);
  color: var(--cashew-100);
}
/* Beige → green: the page background itself (the whole viewport, no edge) recolours as the section scrolls in, and the section's text follows.
   Scroll-driven (the body is animated by the section's view timeline), no JS; browsers without it keep a plain green section. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body { timeline-scope: --steps, --trust; animation: recolour-bg linear both, recolour-bg-out linear forwards; animation-timeline: --steps, --trust; animation-range: entry 0px entry 700px, entry 0px entry 450px; }
    .steps { view-timeline: --steps block; background: none; animation: recolour-text linear both, recolour-text-out linear forwards; animation-timeline: --steps, --trust; animation-range: entry 0px entry 700px, entry 0px entry 450px; }
    .trust { view-timeline: --trust block; }
    .trust h2 { animation: recolour-heading linear both; animation-timeline: --trust; animation-range: entry 0px entry 450px; }
  }
}
@keyframes recolour-bg { to { background-color: var(--kale); } }
@keyframes recolour-text { from { color: var(--kale); } }
/* and back: green → beige as the next section (Trust) scrolls in; the steps text follows, and the Trust heading starts light on the green. The second animation only fills forwards, so it does not touch the first transition. */
@keyframes recolour-bg-out { to { background-color: var(--cashew-100); } }
@keyframes recolour-text-out { to { color: var(--kale); } }
@keyframes recolour-heading { from { color: var(--cashew-100); } }
.steps__head { padding-inline: 55px; }
.steps__body {
  display: flex;
  align-items: flex-start;
  gap: 135px;
  padding-inline: 55px;
}
.steps__list {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 440px;
}
.steps h2 {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
}
.step { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 520px; } /* steps are centred like the pinned picture; the next one starts to show before the previous leaves */
.step:first-child { min-height: 620px; } /* as tall as the picture, so step 1 is centred on it while the picture still scrolls with the page */
.step__title { display: flex; align-items: center; gap: 14px; }
.step__copy { display: flex; flex-direction: column; gap: 48px; }
.step__desc { display: flex; flex-direction: column; gap: 12px; max-width: 85%; }
.step__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--carrot);
  border-radius: 50%;
  color: var(--kale);
  font-size: 16px;
  font-weight: 700;
}
.step h3 { font-size: 28px; font-weight: 600; line-height: 1.27; }
.step p { font-size: 16px; font-weight: 300; line-height: 1.5; }
.step__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--carrot);
  font-size: 16px;
  font-weight: 500;
  transition: color 300ms ease;
  padding: 14px 20px; /* bigger hover area around the text, same as .card__link */
  margin: -14px -20px;
}
/* same hover as .card__link: lighter carrot, underline (under the text only, not the arrow) slides in from the left and leaves to the right */
.step .step__cta > span { position: relative; }
.step .step__cta > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.step .step__cta:hover,
.step .step__cta:focus-visible { color: color-mix(in srgb, var(--carrot) 72%, #fff); }
.step .step__cta:hover > span::after,
.step .step__cta:focus-visible > span::after { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .step .step__cta, .step .step__cta > span::after { transition: none; } }
.steps__panel { /* pinned in the middle of the screen while the steps scroll past; frame stays, the screen inside changes. Tilts like .laptop (--px/--py from the script in index.html) */
  position: sticky;
  top: max(16px, calc(50vh - var(--k, 1) * 310px)); /* half the picture's height; --k = panel width / 555, set by the script */
  flex: 1;
  min-width: 0;
  aspect-ratio: 555 / 620;
  perspective: 1500px;
  perspective-origin: 50% 48%;
}
.steps__frame { /* drawn at 555x620 and scaled as a whole to the column (--k), so every width gives the same picture, only smaller */
  position: absolute;
  left: 0;
  top: 0;
  width: 555px;
  height: 620px;
  padding: 10px;
  background: #decbb1;
  border-radius: 30px;
  box-shadow: 0 12px 32px rgba(58, 53, 32, 0.1), inset 0 0 0 1px #b9b49f;
  transform: scale3d(var(--k, 1), var(--k, 1), var(--k, 1)) translate(277.5px, 297.6px) rotateX(calc(var(--py, 0) * 2.7deg)) rotateY(calc(var(--px, 0) * -4.2deg)) translate(-277.5px, -297.6px);
  transform-origin: 0 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.steps__screen { position: relative; height: 100%; background: var(--cashew-100); border-radius: 22px; transform-style: preserve-3d; } /* the beige screen and the frame stay put, only the content swaps */
.shot { position: absolute; inset: 0; fill: var(--kale); font-weight: 400; transform-style: preserve-3d; }
.shot > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* blocks of a screen (g.rv, --i = their order from the top) rise one after another, driven by GSAP: see the steps script */
/* level 1 (.shot__base): what stands on the beige screen: headings, labels, progress bar and the beige plaques (notification, other jobs) with their content. No styles of its own. */
/* level 2: the white cards together with everything on them. Same numbers as .laptop .block; scale() cancels the perspective growth of translateZ. */
.shot__up { transform: translate3d(calc(var(--px, 0) * 5px), calc(var(--py, 0) * -3px), 60px) scale(calc(1 - var(--k, 1) * 60 / 1500)); }

/* Trust: what we never do / what you always get (design: pen frame "Trust C5") */
.trust { padding: 160px 0 200px; }
.trust .container { padding-inline: 55px; } /* same inner width as the steps (1130px) */
.trust h2 { font-size: 46px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; text-align: center; }
.trust__cols { display: grid; grid-template-columns: 1fr 1px 1fr; margin-top: 72px; }
.trust__col--no { padding-right: 64px; }
.trust__col--yes { padding-left: 82px; }
.trust__rule { background: #edc9a2; margin-bottom: 34px; } /* ends where the last row's bottom padding starts */
.trust__eyebrow { align-self: flex-start; display: inline-block; margin-bottom: 20px; padding: 7px 18px; border-radius: 9999px; font-size: 14px; font-weight: 600; line-height: 18px; text-transform: uppercase; }
.trust__col { display: flex; flex-direction: column; }
.trust__col--no .trust__eyebrow { background: #ffe4c5; color: #442202; }
.trust__col--yes .trust__eyebrow { background: rgb(198 240 203 / .5); color: var(--kale); }
.trust__item { display: flex; align-items: flex-start; gap: 24px; padding: 24px 0; }
.trust__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; }
.trust__col--no .trust__icon { background: #ffe4c5; color: #442202; }
.trust__col--yes .trust__icon { background: rgb(198 240 203 / .5); color: var(--kale); }
.trust__item h3 { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.3px; color: var(--cashew-80); }
.trust__item p { margin-top: 8px; max-width: var(--w, 358px); font-size: 16px; line-height: 1.4; color: var(--cashew-60); }
@media (max-width: 960px) {
  .trust { padding: 100px 0 120px; }
  .trust__cols { display: flex; flex-direction: column; gap: 40px; margin-top: 48px; }
  .trust__rule { display: none; }
  .trust__col--no, .trust__col--yes { padding: 0; }
}
@media (max-width: 760px) { .trust h2 { font-size: 36px; text-align: left; } .trust__item h3 { font-size: 20px; } }

/* Pricing (design: pen frame "Pricing: everything in Free, plus (B)") */
.pricing { padding: 0 0 160px; }
.pricing h2 { font-size: 46px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; text-align: center; }
.pricing__sub { margin-top: 22px; font-size: 20px; line-height: 1.4; text-align: center; color: var(--cashew-80); opacity: .8; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 62px; }
.plans .card-tilt { display: flex; } /* same tilt wrapper as the cards above; flex so the plan fills the grid cell */
.plan { flex: 1; transform-style: preserve-3d; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 560px; padding: 28px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #e1d9ce; }
.plan__top, .plan__btn { transform: translateZ(40px) scale(calc(1 - 40 / 1500)); } /* content floats above the card face, like .card__top */
.plan--hot { box-shadow: inset 0 0 0 2px var(--carrot); }
.plan__top { display: flex; flex-direction: column; gap: 12px; }
.plan h3 { font-size: 19px; font-weight: 600; line-height: 24px; }
.plan__price b { font-size: 44px; font-weight: 600; line-height: 43px; letter-spacing: -1px; }
.plan__price span { font-size: 16px; color: var(--cashew-60); }
.plan__includes { display: flex; flex-direction: column; gap: 9px; padding: 16px 0; border-block: 1px solid #ffd6a8; font-size: 15px; color: var(--cashew-80); }
.plan:first-child .plan__includes { gap: 10px; }
.plan__inc, .plan__row { display: flex; align-items: center; gap: 10px; }
.plan__inc { font-weight: 600; color: var(--kale); }
.plan__check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--carrot); color: var(--kale); }
.plan__check .ic { width: 12px; height: 12px; } /* library icons (stroke 2 on the 24 grid, see icons.css) */
.plan__act { display: flex; align-items: center; justify-content: space-between; }
.plan__cost { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 3px 12px 3px 10px; border-radius: 999px; background: #ffe4c5; font-size: 13px; font-weight: 600; color: var(--kale); }
.plan__cost span { width: 2ch; text-align: center; font-variant-numeric: tabular-nums; } /* one-digit prices sit in the middle of the two-digit ones, the carrots stay on one line */
.plan__carrots { display: flex; flex-direction: column; gap: 2px; }
.plan__carrots b { display: flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 700; }
.plan__carrots span, .plan__est { font-size: 15px; color: var(--cashew-80); opacity: .7; }
.plan__est { line-height: 1.4; }
.plan__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--spinach); font-size: 16px; font-weight: 600; color: var(--spinach); position: relative; isolation: isolate; overflow: hidden; transition: color 300ms; }
.plan__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* same circle-fill hover as .btn-login (--x/--y/--d come from the script in index.html); the carrot button gets the lighter carrot bubble like .counter__cta */
.plan__btn::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: var(--d, 150%); aspect-ratio: 1; border-radius: 50%; background: var(--spinach); transform: translate(-50%, -50%) scale(0); transition: transform 400ms cubic-bezier(.4, 0, .2, 1); }
.plan__btn:hover { color: var(--cashew-100); }
.plan__btn:hover::before { transform: translate(-50%, -50%) scale(1); }
.plan__btn--fill { background: var(--carrot); box-shadow: none; color: var(--kale); }
.plan__btn--fill::before { background: color-mix(in srgb, var(--carrot) 72%, #fff); }
.plan__btn--fill:hover { color: var(--kale); }
.plan__tag { position: absolute; left: 24px; top: -14px; padding: 5px 16px; border-radius: 999px; background: var(--carrot); font-size: 12px; font-weight: 600; }
.pricing__note { margin-top: 32px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--cashew-80); opacity: .7; }
@media (max-width: 960px) { .pricing { padding-bottom: 120px; } .plans { grid-template-columns: repeat(2, 1fr); margin-top: 48px; } .plan { min-height: 0; } }
@media (max-width: 760px) { .pricing h2 { font-size: 36px; } .pricing__sub { font-size: 18px; } .plans { grid-template-columns: 1fr; gap: 24px; } }
/* Phone: the paid plans share one list of actions, so three tall cards in a column say the same thing three times. Instead: Free as a card, the three paid plans as tiles
   in a row, and below them the details of the chosen plan only (carrots, what they buy, the button). Radio inputs + :has(), no script. Up to 4 paid plans are styled. */
.plans__radio, .plans__pick { display: none; }
@media (max-width: 760px) {
  .plans { gap: 16px; }
  .plans__radio { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* over its own tile: invisible but focusable (arrow keys move between the tiles), and the page never jumps to it */
  .plans__pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
  .plans__tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 6px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #f0ece6; text-align: center; cursor: pointer; }
  .plans__tab b { display: flex; align-items: center; justify-content: center; min-height: 32px; font-size: 13px; font-weight: 600; line-height: 16px; color: var(--kale); } /* room for two lines, so every price sits at the same height */
  .plans__price { font-size: 22px; font-weight: 600; line-height: 24px; letter-spacing: -0.5px; }
  .plans__price small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--cashew-60); }
  .plans__carrots { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 13px; font-weight: 600; color: var(--kale); }
  .plans__hot { position: absolute; left: 50%; top: -9px; translate: -50% 0; padding: 3px 8px; border-radius: 999px; background: var(--carrot); font-size: 10px; font-weight: 600; line-height: 12px; white-space: nowrap; }
  .plans__tab:has(.plans__radio:checked) { box-shadow: inset 0 0 0 2px var(--carrot); }
  .plans__tab:has(.plans__radio:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
  .plans .plans__card { display: none; }
  .plans .plans__card { margin-top: -12px; } /* the tiles to the open plan: 24px halved to 12px, so the notch is 4px from the chosen tile */
  .plans:has(#plan-1:checked) .plans__card--1, .plans:has(#plan-2:checked) .plans__card--2, .plans:has(#plan-3:checked) .plans__card--3, .plans:has(#plan-4:checked) .plans__card--4 { display: flex; }
  .plans__card h3, .plans__card .plan__price, .plans__card .plan__tag { display: none; } /* the tile above says the name, the price and "most popular" */
  .plans__card .plan__carrots { order: -2; } .plans__card .plan__est { order: -1; } /* what you get first, then what it buys */
  .plans__card .plan { box-shadow: inset 0 0 0 2px var(--carrot); } /* the same orange as the chosen tile: they read as one piece */
  .plans__card .plan::before { content: ""; position: absolute; top: -8px; width: 14px; height: 14px; border-top: 2px solid var(--carrot); border-left: 2px solid var(--carrot); border-top-left-radius: 3px; background: #fff; rotate: 45deg; } /* the notch points at the tile above (columns of the 3-tile row, 8px gap) */
  .plans__card--1 .plan::before { left: calc((100% - 16px) / 6 - 7px); }
  .plans__card--2 .plan::before { left: calc((100% - 16px) / 2 + 1px); }
  .plans__card--3 .plan::before { left: calc((100% - 16px) * 5 / 6 + 9px); }
  .plan { padding: 20px; gap: 20px; }
  .plan:first-child .plan__top { flex-flow: row wrap; align-items: baseline; column-gap: 12px; row-gap: 12px; } /* Free: its name and €0 share a line */
  .plan:first-child .plan__top > :not(h3, .plan__price) { flex: 0 0 100%; }
  .plan:first-child .plan__price b { font-size: 36px; line-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .plan__btn, .plan__btn::before { transition: none; } }

/* FAQ (design: pen frame "FAQ"): a bouncy accordion, the motion lives in the script at the end of index.html */
.faq { padding: 0 0 160px; }
.faq h2 { font-size: 46px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; text-align: center; }
.faq__tilt { width: min(100%, 760px); margin: 48px auto 0; } /* the whole list tilts toward the cursor like the cards (.card-tilt) */
.faq__list, .faq__item, .faq__card { transform-style: preserve-3d; }
.faq__q, .faq__a { transform: translateZ(40px) scale(calc(1 - 40 / 1500)); } /* text floats above the card face; no overflow:hidden on the card, it would flatten this */
.faq__card { border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 0 transparent; --div: #efe1cf; transition: box-shadow .3s; }
.faq__card:not([data-state="open"]):not([data-end]) { box-shadow: inset 0 -1px 0 var(--div); }
.faq__q { display: flex; align-items: center; gap: 16px; width: 100%; padding: 22px 28px; border: 0; background: none; font: inherit; font-size: 18px; font-weight: 600; line-height: 1.25; text-align: left; color: var(--cashew-80); cursor: pointer; transition: color .3s; }
.faq__q > span:first-child { flex: 1; min-width: 0; }
.faq__card[data-state="open"] .faq__q { color: var(--kale); }
.faq__q:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; border-radius: 14px; }
.faq__chev { flex: none; display: grid; color: var(--cashew-60); transition: color .3s; }
.faq__card[data-state="open"] .faq__chev { color: var(--kale); }
.faq__a { overflow: hidden; }
.faq__a-in { padding: 14px 28px 24px; font-size: 16px; line-height: 1.5; color: var(--cashew-80); opacity: .7; }
@media (max-width: 760px) { .faq h2 { font-size: 36px; } .faq__q { padding-inline: 20px; font-size: 17px; } .faq__a-in { padding-inline: 20px; } }

/* Final CTA + footer (design: pen frames "Final CTA" and "Footer") */
.final { position: relative; overflow: hidden; padding: 0 0 110px; min-height: 737px; }
.final__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent); mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent); } /* the clip is a touch pinker than the page and has dark rows at the bottom edge: the box fades into the beige at both ends, even where the clip is taller than the section */
.final__video { position: absolute; left: 50%; bottom: -80px; width: max(1840px, 100%); height: auto; translate: -50% 0; }
.final__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.final h2 { font-size: 52px; font-weight: 600; line-height: 1.13; letter-spacing: -1px; text-align: center; }
.final h2 .brk { display: block; } /* the break between the two halves of the heading (not a <br>: SplitText turns a <br> into a hard break that cannot be hidden); off on a phone, see below */
.final__cta { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.final__cta p { font-size: 14px; text-align: center; color: var(--cashew-80); opacity: .8; }
.final .counter__cta { margin: 0; } /* .step__cta carries -14px/-20px margins for its hover area, they would eat the 20px gap */
/* Footer (design: pen frames "Footer v2" 1840 and "Footer v2 · Mobile 390"): white card with the brand and sign-up on the left, section and legal links on the right, the copyright line under it.
   Hovers are the header's: links go lime with the underline sliding in (.nav__links a), Log in fills with a spinach circle (.btn-login), Sign up with a lighter carrot (.counter__cta). */
.footer { padding: 32px 0; }
.footer__in { display: flex; flex-direction: column; gap: 24px; }
.footer__card { transform-style: preserve-3d; border-radius: 24px; background: #fff; }
.footer__in .card-tilt { transform: perspective(1500px) rotateX(calc(var(--py, 0) * -3.9deg)) rotateY(calc(var(--px, 0) * 3.9deg)) translate3d(0, 0, 100px) scale(calc(1 - 100 / 1500)); } /* the cards' tilt at 49% (70% of 70%): 3.9deg instead of 8 */
@media (min-width: 961px) and (hover: hover) { .footer__in .card-tilt:hover { scale: 1.025; } }
.footer__layer { display: flex; justify-content: space-between; gap: 48px; padding: 48px; transform: translateZ(20px) scale(calc(1 - 20 / 1400)); } /* everything on the card is one layer floating 20px above its face (.card__top floats 40, this is half of it); the card turns as one piece (.card-tilt, landing.js). It spans the whole card so it scales about the card centre: 1 - 20/1400 cancels the perspective growth exactly, the content rests where the design has it */
.footer__brand { display: flex; flex-direction: column; gap: 28px; width: 480px; min-width: 0; }
.footer__logo { display: block; height: 32px; }
.footer__logo img { display: block; }
.footer__tagline { font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -0.6px; color: var(--kale); }
.footer__mail, .footer__sections a { position: relative; align-self: flex-start; color: var(--spinach); font-weight: 500; transition: color 300ms ease; }
.footer__mail { margin: -16px 0 -6px; padding: 6px 0; font-size: 14px; line-height: 18px; } /* 18px under the tagline as in the design; the padding is a bigger hover area, the negative margin keeps the layout */
.footer__sections a { display: block; padding: 8px 0; font-size: 20px; line-height: 25px; }
.footer__mail::after, .footer__sections a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.footer__sections a::after { bottom: 2px; }
.footer__mail:hover, .footer__mail:focus-visible, .footer__sections a:hover, .footer__sections a:focus-visible { color: var(--lime); outline: none; }
.footer__mail:hover::after, .footer__mail:focus-visible::after, .footer__sections a:hover::after, .footer__sections a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.footer__auth { display: flex; gap: 12px; }
.footer__signup { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 46px; padding: 0 20px; border-radius: 8px; background: var(--carrot); color: var(--kale); font-size: 14px; font-weight: 500; line-height: 18px; position: relative; isolation: isolate; overflow: hidden; } /* ::before and the pointer origin come from .counter__cta */
.footer__login { box-sizing: border-box; height: 46px; margin: 0; justify-content: center; }
.footer__rule { display: none; height: 1px; margin: 0; border: 0; background: #e1d9ce; }
.footer__menu { display: flex; flex-direction: column; justify-content: space-between; width: max-content; min-width: 430px; min-height: 246px; padding-bottom: 12px; }
.footer__sections { display: flex; gap: 82px; padding-top: 8px; }
.footer__sections > div { display: flex; flex-direction: column; gap: 4px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.footer__links a, .footer__links button { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; font: inherit; font-size: 13px; line-height: 16px; color: var(--cashew-60); white-space: nowrap; cursor: pointer; transition: color 300ms ease; }
.footer__links a:hover, .footer__links a:focus-visible, .footer__links button:hover, .footer__links button:focus-visible { color: var(--lime); outline: none; }
.footer__credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 0 48px; font-size: 13px; line-height: 16px; color: var(--cashew-60); }
.footer__login:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .footer__mail, .footer__mail::after, .footer__sections a, .footer__sections a::after, .footer__links a, .footer__links button { transition: none; } }
@media (max-width: 1000px) { /* brand and the two link columns need about 820px inside the card */
  .footer { padding: 0 0 28px; }
  .footer__in { width: calc(100% - 32px); gap: 20px; }
  .footer__card { border-radius: 20px; }
  .footer__layer { flex-direction: column; gap: 28px; padding: 24px; }
  .footer__brand { width: auto; }
  .footer__tagline { font-size: 30px; letter-spacing: -0.6px; }
  .footer__auth > * { flex: 1; padding: 0 16px; }
  .footer__rule { display: block; }
  .footer__menu { width: auto; min-width: 0; min-height: 0; gap: 28px; padding: 0; }
  .footer__sections { gap: 24px; padding: 0; }
  .footer__sections > div { flex: 1; gap: 8px; }
  .footer__sections a { padding: 4px 0; font-size: 17px; line-height: 21px; }
  .footer__sections a::after { bottom: 2px; }
  .footer__links { justify-content: center; }
  .footer__credits { padding: 8px 0 0; }
}
@media (max-width: 760px) { .final h2 { font-size: 36px; } .final { min-height: 560px; padding-bottom: 80px; } }

/* Reveal on scroll, same mechanics as pieterkoopt.nl/stadstour: text rises 20px per LINE while fading in (headings 0.6s with 0.15s between lines,
   paragraphs 0.8s with 0.1s), other elements fade up 20px (0.7s). Once, when the element's top reaches 90% of the viewport.
   Text lines are split and animated by GSAP SplitText (script at the end of index.html); blocks rise via gsap.to from the same script. Earlier variants: reveal-beetogreen/, reveal-paypath/. */
:root {
  --reveal-ease: cubic-bezier(.509, .188, .041, .989);
  --reveal-ease-block: cubic-bezier(.215, .61, .355, 1);
}

/* Hero background only fades in (opacity, no movement) on load; the menu items rise in last, see the script */
.top::before { animation: fade-in 2.6s ease-out 0s both; } /* starts right at page load, before the dashboard (laptop reveal at .65s) */
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .top::before { animation: none; } }

/* Links inside running text (pricing note, FAQ answers): underlined, the text's own colour, lime on hover like the other links */
.pricing__note a, .faq__a-in a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 300ms ease; }
.pricing__note a:hover, .pricing__note a:focus-visible, .faq__a-in a:hover, .faq__a-in a:focus-visible { color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .pricing__note a, .faq__a-in a { transition: none; } }

/* ---------- Responsive: the design is drawn at 1440; below 1200 the hero, steps, trust and pricing are narrowed, from 960 down
   (tablet, 24px gutters) and 760 down (phone, 16px gutters) everything stacks. Desktop-first, as the app. ---------- */

/* Narrow desktop (961-1199): the hero keeps two columns but the copy gives way to the sign-up card; steps and trust drop their inner padding */
@media (max-width: 1199px) {
  .hero__row { gap: 40px; }
  .hero__copy { flex: 1; min-width: 0; width: auto; }
  .hero__copy p { width: auto; max-width: 550px; }
  h1 { font-size: clamp(40px, 4.6vw, 56px); line-height: 1.09; letter-spacing: -0.02em; }
  .steps__head, .steps__body { padding-inline: 0; }
  .steps__body { gap: 64px; }
  .steps__list { width: 400px; }
  .trust .container { padding-inline: 0; }
  .trust__col--no { padding-right: 40px; }
  .trust__col--yes { padding-left: 48px; }
  .plans { grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; margin-inline: auto; }
  .plan { min-height: 0; }
}

/* Tablet (761-960) */
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .hero { padding-top: 48px; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 36px; }
  .hero__copy { flex: none; width: 100%; }
  h1 { font-size: 48px; line-height: 1.1; }
  .signup { width: min(100%, 480px); }
  .laptop { padding-block: 48px; }
  .counter__val { font-size: 128px; line-height: 128px; letter-spacing: -6px; }
  .counter__number { height: 128px; }
  .counter__plus { font-size: 96px; line-height: 96px; }
  .counter__caption { font-size: 32px; line-height: 1.25; text-align: center; }
  .silence { gap: 40px; padding: 120px 0 140px; }
  .silence h2 { padding-inline: var(--gutter); font-size: 40px; }
  .cards { gap: 20px; }
  .card { height: auto; min-height: 340px; padding: 28px; gap: 32px; }
  .card h3 { font-size: 20px; }
  .steps h2 { font-size: 44px; }
  .steps__body { gap: 40px; }
  .steps__list { flex: 1; width: auto; min-width: 0; }
  .step { min-height: 480px; }
  .step:first-child { min-height: 520px; }
  .step__desc { max-width: none; }
  .step h3 { font-size: 24px; }
  .steps__panel { flex: 1.1; }
  .trust__cols { display: grid; gap: 0; } /* two columns still fit at tablet width */
  .trust__rule { display: block; }
  .trust__col--no { padding-right: 32px; }
  .trust__col--yes { padding-left: 32px; }
  .trust h2, .pricing h2, .faq h2 { font-size: 40px; }
  .final h2 { font-size: 44px; }
}

/* Phone (up to 760) */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .hero { padding-top: 4px; } /* the gap from the logo to the headline on a phone, halved: 56px to 28px */
  .hero__row { gap: 28px; }
  .hero__copy { gap: 16px; }
  h1 { font-size: 40px; letter-spacing: -0.8px; }
  .oauth { height: 48px; }
  .signup__foot p { flex-wrap: wrap; white-space: normal; text-align: center; }
  .signup__legal { column-gap: 4px; row-gap: 0; }
  .top::before { display: none; } /* on a phone the picture sits behind the dashboard instead (.laptop::before) */
  .laptop::before { /* the picture at half its 2020px (it was 1:1, a blurry close-up), centred on the dashboard; its edges fade out */
    content: ""; position: absolute; z-index: -1; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 50%; height: 450px; margin-top: -225px; pointer-events: none;
    background: url("landing/hero-background-aerial.png") 50% 50% / 1010px auto no-repeat;
    -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  }
  .laptop { position: relative; padding-block: 32px 40px; } /* the dashboard is wider than the screen and runs off its right edge (.top clips it at the screen edge) */
  .laptop__frame { padding: 4px; border-radius: 14px; width: calc((100% + var(--gutter)) / .6); } /* from the left gutter to the edge shows 60% of the frame, 40% is cut (--k follows the width, landing.js) */
  .laptop::after { /* a see-through beige veil on the cut edge: the dashboard fades out to the right, so it reads as going on past the screen (translateZ keeps it in front of the tilted blocks, scale cancels the perspective growth) */
    content: ""; position: absolute; top: 32px; bottom: 40px; right: calc(var(--gutter) * -1); width: 88px; pointer-events: none;
    background: linear-gradient(to right, rgba(250, 241, 229, 0), rgba(250, 241, 229, .88)); transform: translateZ(100px) scale(.933); transform-origin: 100% 50%;
  }

  /* pinned scene: smaller numbers, the chips shrink to 60% and stay behind the counter text */
  .counter { position: relative; z-index: 1; padding-inline: var(--gutter); }
  .counter__val { font-size: 84px; line-height: 84px; letter-spacing: -4px; }
  .counter__number { height: 84px; }
  .counter__plus { font-size: 64px; line-height: 64px; }
  .counter__caption { font-size: 26px; letter-spacing: -0.3px; }
  .counter__sub { width: auto; max-width: 320px; font-size: 16px; }
  .br-phone { display: block; }
  .scene--anim .chip { scale: .6; }
  .scene--anim .chip:not(.is-in), .scene--anim .chip.is-out { scale: .54; }

  .silence { gap: 32px; padding: 96px 0 112px; }
  .silence h2 { font-size: 34px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card { min-height: 0; padding: 24px; gap: 28px; }
  .card__top { flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 18px; } /* stacked cards: the icon on the right, the text on the left */
  .card__top img { width: 76px; height: 76px; flex: none; }
  .card__text { flex: 1; min-width: 0; }
  .card h3 { font-size: 19px; } .card__text p { font-size: 15px; } /* the three problem cards on a phone, a point smaller (20px / 16px) */
  .card__link { min-height: 44px; }

  /* steps: the picture sticks to the top of the screen and the step texts scroll up under it; the step under the picture picks its screen (the 50% line in landing.js) */
  .steps { padding: 24px 0 96px; overflow-x: clip; }
  .steps h2 { font-size: 36px; }
  .steps__head { margin-bottom: 32px; }
  .steps__body { flex-direction: column; align-items: stretch; gap: 0; }
  /* no pinned picture on a phone: landing.js gives every step its own frame (.steps__panel--step) below its text, and it scrolls with the text */
  .steps__panel:not(.steps__panel--step) { display: none; }
  .steps__panel--step { position: relative; top: auto; flex: none; align-self: center; width: min(100%, 420px); margin-top: 9px; } /* title to picture 36px, 30% less: 25px (16px gap + 9px) */
  .step, .step:first-child, .step:last-child { min-height: 0; justify-content: flex-start; padding: 32px 0 40px; }
  .step__copy { display: contents; } /* the text and the button are the step's own rows, so the button can go under the picture (order) */
  .steps__panel--step { order: 1; }
  .step__desc { order: 2; max-width: none; margin-top: 8px; } /* picture to text 24px, the same as text to button */
  .step__cta { order: 3; margin-top: -6px; } /* title, picture, text, button; the -6px margin keeps the button text 24px below the text (-14px of it is the hover area) */
  .step h3 { font-size: 24px; }
  .step__cta { min-height: 44px; }

  .trust { padding: 88px 0 96px; }
  .trust__cols { display: flex; gap: 40px; }
  .trust__rule { display: none; }
  .trust__col--no, .trust__col--yes { padding: 0; }
  .trust h2, .pricing h2, .faq h2 { font-size: 34px; }
  .trust__item { gap: 18px; padding: 18px 0; }
  .trust__icon { width: 48px; height: 48px; border-radius: 14px; }
  .pricing { padding-bottom: 96px; }
  .pricing__sub { font-size: 17px; }
  .plans { grid-template-columns: 1fr; max-width: 480px; }
  .faq { padding-bottom: 96px; }
  .final h2 { font-size: 34px; }
  .final { min-height: 0; padding-bottom: 220px; }
  .final__video { width: 1100px; }
  .final__art { -webkit-mask-image: linear-gradient(transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(transparent, #000 64px, #000 calc(100% - 64px), transparent); } /* the section is 427px tall here: 160px fades at both ends washed out the middle, 64px keeps the road and the hare bright */
}

@media (max-width: 600px) {
  .signup { width: 100%; padding: 24px 16px 18px; }
  h1 br { display: none; }
  .final h2 .brk { display: none; }
  .final h2 { text-wrap: balance; } /* a phone breaks this heading where it fits, in even lines */
  .counter__val { font-size: 72px; line-height: 72px; letter-spacing: -3px; }
  .counter__number { height: 72px; }
  .counter__plus { font-size: 54px; line-height: 54px; }
  /* "207,000+" is the widest number and the "+" hangs off its right edge: it must stay inside the gutters, so below 390px it shrinks with the screen (fits from 320px up) */
  .vacancies .counter__val, .vacancies .counter__number { font-size: min(72px, calc(20vw - 3px)); line-height: min(72px, calc(20vw - 3px)); }
  .vacancies .counter__number { height: min(72px, calc(20vw - 3px)); }
  .vacancies .counter__plus { font-size: min(54px, calc(15vw - 2px)); line-height: min(54px, calc(15vw - 2px)); }
}

@media (max-width: 355px) { h1 { font-size: 34px; } } /* up to 355px the 40px headline breaks into 4 lines; 34px is the phone size of the section headings */
@media (max-width: 340px) { .card { padding-inline: 20px; } .card__top { gap: 12px; } .card__top img { width: 64px; height: 64px; } } /* the narrowest phones: room for the forced lines of the three problem cards to stay on two lines */
@media (max-width: 335px) { .signup h2 { font-size: 20px; } } /* "Create your free account" needs 268px, the card has 256px at 320px */

/* Lenis (mouse-wheel smoothing, see landing.js): its own stylesheet, v1.3.4 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* GOJOB-580: clickable jobs, new jobs unfold at the top of the list */
.hs-list { left: 0; top: 55px; width: 379px; height: 470px; }
.hs-jobs__day { z-index: 1; transition: top .45s cubic-bezier(.22, 1, .36, 1); }
.hs-job { pointer-events: auto; cursor: pointer; transition: top .45s cubic-bezier(.22, 1, .36, 1), background-color .15s; }
.hs-job:hover { background-color: #fdf8f2; }
/* as in the product list: unread = white, read = Cashew 050, selected = Cantaloupe 40; hover steps one shade */
.hs-job.is-read:not(.hs-job--on) { background-color: #fdf8f2; }
.hs-job.is-read:not(.hs-job--on):hover { background-color: #faf1e5; }
.hs-job--on, .hs-job--on:hover { background-color: #ffe4c5; }
.hs-job.is-read .hs-job__dot, .hs-job--on .hs-job__dot { display: none; }
.hs-job:focus-visible { outline: 2px solid var(--spinach); outline-offset: -2px; }
.hs-tabc { left: 29px; top: 500px; width: 805px; height: 20px; overflow: hidden; text-overflow: ellipsis; color: var(--cashew-80); font-size: 14px; line-height: 20px; }
.hs-posted__y--l { display: grid; place-items: center; font-size: 17px; }
/* the row opens downward in step with the rows below sliding down (same .45s curve), then its content rises in */
.hs-new { animation: hs-unfold .45s cubic-bezier(.22, 1, .36, 1); }
.hs-new > * { animation: hs-rise .5s .2s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes hs-unfold { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes hs-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .hs-new, .hs-new > * { animation: none; } .hs-job, .hs-jobs__day { transition: none; } }