/* Self-hosted so first paint never waits on fonts.googleapis.com, which was
   costing ~600ms of render-blocking time on the critical path. Both faces are
   variable, so one file covers every weight the site uses. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Jwalix — "finalV" design system
   Fraunces (display serif) + Manrope (body sans). Palette matches the real
   Jwalix logo mark (src/assets/references/JWALIX_logo_purple.png): deep
   violet wordmark, flame-gradient accent running cyan -> blue -> green.
   Token names are kept as-is (orchid/plum/mint/aqua/sky) so every component
   below still resolves; only the hex values were swapped to the logo's
   actual colors. One shared stylesheet for every route — see
   /assets/js/main.js for the animation behaviours this file only lays the
   groundwork for (data-reveal, data-counter, .marquee, header scroll state,
   FAQ accordion).
   ========================================================================== */

:root{
  --orchid:#4A2E9B;
  --orchid-dark:#341F72;
  --orchid-tint:#F1ECFB;
  --plum:#5C4F7C;
  --plum-deep:#211540;
  --plum-line:#3B2E60;
  --mint:#5FC730;
  --mint-deep:#2F8F3E;
  --mint-tint:#EDF9E7;
  --coral:#EA726D;
  --coral-deep:#C2453F;
  --coral-tint:#FDEDEC;
  --aqua:#38C6DE;
  --aqua-deep:#1E8FA3;
  --aqua-tint:#E9FAFB;
  --sky:#2E7DE0;
  --sky-deep:#1857B0;
  --sky-tint:#EAF2FD;
  --taupe:#7C7190;
  --ink:#241541;
  --paper:#FBF9FD;
  --white:#FFFFFF;
  --line:#E5DFEF;

  --radius-s:6px;
  --radius-m:14px;
  --radius-l:20px;
  --radius-xl:24px;
  --maxw:1200px;
  --maxw-narrow:820px;

  --shadow-s:0 2px 8px rgba(36,30,44,.08);
  --shadow-m:0 20px 45px rgba(36,30,44,.14);
  --shadow-l:0 30px 60px rgba(36,30,44,.28);

  --ease-out: cubic-bezier(.16,.8,.32,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Clears the sticky 74px-tall header (16px top offset) when native anchor
   scroll (html{scroll-behavior:smooth}) jumps here, e.g. from .section-jump
   or any other #id link — otherwise the section's own heading lands hidden
   underneath the floating header pill. */
#hero, #platform, #ai, #security, #solutions, #faq{scroll-margin-top:110px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{
  margin:0;
  font-family:'Manrope',sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
/* Note: an earlier pass gave dark-hero pages (home) a hard-stop gradient on
   body itself, to fake continuity behind the floating nav pill. Replaced by
   having .hv2 itself reach up under the header via a negative margin (see
   .hv2 below) — the body background can stay the plain --paper colour on
   every page again, including this one. */
h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  color:var(--plum-deep);
  margin:0;
  line-height:1.12;
  letter-spacing:-0.01em;
}
/* Section title default — one size/family for every section heading on the
   site. Scoped class rules below it (.cta-final h2, .article-body h2, form/
   auth-card h2) intentionally win by specificity where a smaller heading is
   a real UI component, not a marketing section title. */
h2{font-size:34px;}
@media (max-width:720px){h2{font-size:27px;}}
/* Section eyebrow default — every "kicker"/"eyebrow" label site-wide shares
   this size/weight; only the colour varies with the section's background
   (light section: --orchid-dark; dark section / hero: --aqua), still set
   per-context below. */
.kicker,.eyebrow-line span{font-size:16px;font-weight:400;color:var(--orchid-dark);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2.5px solid var(--orchid);outline-offset:3px;border-radius:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.wrap-narrow{max-width:var(--maxw-narrow);margin:0 auto;padding:0 32px;}
@media (max-width:720px){.wrap,.wrap-narrow{padding:0 20px;}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;
  border:1.5px solid transparent;white-space:nowrap;transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orchid);color:#fff;}
.btn-primary:hover{background:var(--orchid-dark);box-shadow:0 6px 18px rgba(74,46,155,.32);}
.btn-ghost{background:transparent;color:var(--plum-deep);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--plum);}
.btn-dark{background:var(--plum-deep);color:#fff;}
.btn-dark:hover{background:#171220;}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.btn[disabled]:hover{box-shadow:none;transform:none;}

/* ---------- Announcement bar (homepage only) ------------------------------- */
.announce-bar{background:var(--mint-deep);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:9px 16px;}
.announce-bar a{color:#fff;text-decoration:underline;margin-left:4px;}

/* ---------- Header / Nav (shared chrome — same markup on every page) ----
   "Island" nav: a floating, rounded, dark pill inset from the top and
   sides rather than a full-bleed bar — margin-top (initial position) and
   sticky `top` (pinned position) are both 16px so the gap from the
   viewport's top edge stays constant whether the page is scrolled or not.
   Everything below (.mega, breadcrumbs, page content) stays on the site's
   normal light theme — only this floating bar itself goes dark.
   No backdrop-filter here on purpose: a filter/backdrop-filter (like a
   transform) on an ancestor makes IT the containing block for any
   position:fixed descendant instead of the viewport — .mega-product is a
   position:fixed descendant of this header, so it was resolving its
   `top` against the header's own box, not the viewport, landing it
   ~55px too low and turning the space above it into an unclickable dead
   zone. background is already 92% opaque, so the blur wasn't doing much
   real work anyway. */
header.site-header{
  position:sticky;top:16px;z-index:100;
  width:min(var(--maxw),94vw);margin:16px auto 0;
  background:rgba(255,255,255,.92);
  /* border:1px solid var(--line); */
  border-radius:999px;
  box-shadow:var(--shadow-m);
  transition:box-shadow .2s ease;
}
header.site-header.is-scrolled{box-shadow:var(--shadow-l);}
/* While the mobile drawer is open, the pill sits directly over whatever
   the page was scrolled to (often mid-hero on the dark home page). Its
   normal 92%-opaque background lets that content ghost through, which
   reads as a rendering glitch right when the menu opens rather than as
   the intended glassy translucency. Fully opaque only for this state. */
header.site-header.is-drawer-open{background:#fff;}
.navbar{display:flex;align-items:center;justify-content:space-between;height:74px;}
.logo{display:flex;align-items:center;}
.logo-img{height:64px;width:auto;display:block;}
/* nav.primary/.nav-item are stretched to the pill's full 74px height
   (rather than sizing to the nav-link button's own ~43px) so a mega
   dropdown's top:calc(100% + Npx) measures from the pill's true bottom
   edge, not from the vertically-centered button inside it — otherwise the
   dropdown starts ~15px too high and overlaps the pill itself. */
nav.primary{display:flex;align-items:center;gap:2px;align-self:stretch;}
.nav-item{position:relative;height:100%;display:flex;align-items:center;}
.nav-link{display:flex;align-items:center;gap:5px;padding:10px 15px;font-size:15px;font-weight:600;color:var(--plum-deep);border-radius:8px;background:none;border:none;}
.nav-link:hover, .nav-item:focus-within .nav-link, .nav-item.is-open .nav-link{background:var(--orchid-tint);color:var(--orchid-dark);}
.nav-link svg{width:11px;height:11px;transition:transform .18s ease;flex-shrink:0;}
.nav-item:hover .nav-link svg, .nav-item:focus-within .nav-link svg, .nav-item.is-open .nav-link svg{transform:rotate(180deg);}

.mega{
  /* top:100% (flush against the trigger, no gap) is deliberate — a gap
     here is a dead zone: it's not part of .nav-item's hoverable box nor
     .mega's own box, so moving the mouse straight down from the trigger
     to click a .mega-link crosses empty space, :hover is lost instantly
     (no grace period), and the whole panel disappears before the pointer
     ever reaches it. Zero gap means the hover path never leaves either
     element's box. The shadow/border alone is enough visual separation
     from the trigger. */
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--shadow-m);padding:26px;
  opacity:0;visibility:hidden;translate:0 6px;
  transition:opacity .16s ease, translate .16s ease, visibility .16s;
  z-index:50;
}
.nav-item:hover .mega, .nav-item:focus-within .mega, .nav-item.is-open .mega{opacity:1;visibility:visible;translate:0 0;}
/* abstract brand-color glow (violet -> cyan -> green, echoing the logo's
   flame gradient) filling the empty bottom-right corner of every mega
   panel — one layered radial-gradient per panel rather than filter:blur()
   pseudo-elements, so it can never contribute to .mega-product's own
   overflow-y:auto scroll height. Sized for the narrow Solutions/Resources
   dropdowns by default; .mega-product overrides with a bigger, darker
   version scaled to its full-width panel. Content sits above it via
   .mega>* (covers every mega variant — some wrap links in group <div>s,
   others put <a> tags directly under .mega). */
.mega::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:
    radial-gradient(150px 140px at 100% 100%, rgba(74,46,155,.20), transparent 70%),
    radial-gradient(105px 100px at 78% 85%, rgba(56,198,222,.22), transparent 70%),
    radial-gradient(70px 70px at 92% 55%, rgba(95,199,48,.14), transparent 70%);
}
.mega>*{position:relative;z-index:1;}
/* Product is the flagship mega menu — laid out full-width and horizontal
   (one row of groups spanning the page's own container width) via
   position:fixed against the viewport, instead of the narrow 2-column
   dropdown every other mega menu uses. The island header is a fixed
   16px top margin + 74px height + a bit of breathing room = 100px, so
   this can anchor to a literal top offset instead of needing a
   JS-measured height. */
.mega-product{
  position:fixed;top:var(--nav-bottom,90px);left:50%;transform:translateX(-50%);
  width:min(var(--maxw),94vw);padding:32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px 32px;
  max-height:calc(100vh - var(--nav-bottom,90px) - 24px);overflow-y:auto;
}
.mega-product::before{
  background:
    radial-gradient(340px 280px at 100% 100%, rgba(74,46,155,.22), transparent 70%),
    radial-gradient(240px 220px at 80% 90%, rgba(56,198,222,.24), transparent 70%),
    radial-gradient(160px 160px at 94% 55%, rgba(95,199,48,.16), transparent 70%);
}
.mega-solutions{width:300px;}
.mega-resources{width:280px;}
@media (max-width:1080px){.mega{position:static;transform:none;box-shadow:none;border:none;opacity:1;visibility:visible;translate:0;display:none;padding:10px 0 10px 14px;}
  /* .nav-item is display:flex/row for the desktop pill bar (trigger button
     centered in a fixed-height slot). Once .mega drops to position:static
     above, it becomes a second flex child in that same row instead of a
     block underneath the trigger — the submenu rendered beside "Product"
     rather than below it. Stack the trigger and its panel vertically here
     instead. */
  .nav-item{display:block;height:auto;}
  .nav-item.is-open .mega{display:block;}
  .mega::before{display:none;}
  .mega-product{width:auto;max-height:none;overflow-y:visible;grid-template-columns:1fr;gap:0;padding:0;}}
.mega-group-title{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--taupe);margin-bottom:10px;}
.mega-link{display:block;padding:8px 10px;border-radius:8px;margin:0 -10px;}
.mega-link:hover{background:var(--orchid-tint);}
.mega-link .t{display:block;font-size:14.5px;font-weight:700;color:var(--plum-deep);}
.mega-link .d{display:block;font-size:12.5px;color:var(--taupe);margin-top:2px;line-height:1.4;}
.mega-foot{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px;margin-top:4px;}
.mega-foot a{font-size:13.5px;font-weight:700;color:var(--orchid-dark);}

.nav-right{display:flex;align-items:center;gap:10px;}
/* "Request a Demo" in the main nav specifically - a touch darker than
   .btn-ghost's default --line border so it reads clearly against the nav's
   light background, without changing .btn-ghost everywhere else it's used
   (mobile nav menu, other pages/sections). */
.nav-right .btn-ghost{border-color:rgba(36,21,65,0.28);}
.nav-right .btn-ghost:hover{border-color:var(--plum);}
.nav-right .nav-link{padding:10px 14px;}
.burger{display:none;background:none;border:none;padding:6px;}
.burger .bar{display:block;width:22px;height:2px;background:var(--plum-deep);border-radius:2px;margin:5px 0;transition:transform .2s ease, opacity .2s ease;}
.burger.is-open .bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open .bar:nth-child(2){opacity:0;}
.burger.is-open .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:1080px){
  /* 90px = the pill's 16px top margin + 74px height, so the drawer starts
     flush under it. */
  nav.primary{position:fixed;top:90px;left:0;right:0;bottom:0;background:var(--paper);flex-direction:column;align-items:stretch;padding:14px 20px;gap:4px;overflow-y:auto;
    translate:0 -8px;opacity:0;visibility:hidden;transition:translate .2s var(--ease-out), opacity .2s ease, visibility .2s;}
  nav.primary.is-open{translate:0 0;opacity:1;visibility:visible;}
  .nav-right .nav-link.sign-in,.nav-right .btn{display:none;}
  .burger{display:block;}
  .nav-link{width:100%;justify-content:space-between;padding:14px 6px;border-bottom:1px solid var(--line);border-radius:0;}
}
.nav-cta-mobile{display:none;}
@media (max-width:1080px){
  .nav-cta-mobile{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
  .nav-cta-mobile .btn{width:100%;}
}

/* ---------- Breadcrumbs (inner pages) ------------------------------------ */
.breadcrumbs{padding:18px 0;font-size:13px;color:var(--taupe);}
.breadcrumbs a:hover{color:var(--orchid-dark);}
.breadcrumbs .sep{margin:0 8px;color:var(--line);}
.breadcrumbs .current{color:var(--plum-deep);font-weight:700;}

/* ---------- Hero (home: split) -------------------------------------------*/
.hero{padding:76px 0 40px;overflow:hidden;}
/* Side-by-side, weighted slightly toward the illustration (1fr 1.15fr, not
   the old 1.05fr .95fr) so the kanban board actually reads as the hero
   visual instead of a thumbnail squeezed into the leftover space next to
   the copy. .hero-illus itself carries no width cap here — the grid
   column is what sizes it, full-bleed within that column. */
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:40px;align-items:start;}}
.eyebrow-line{display:flex;align-items:center;gap:9px;margin-bottom:20px;}
.eyebrow-line .bar{width:26px;height:2px;background:var(--orchid);}
.hero h1{font-size:52px;}
@media (max-width:720px){.hero h1{font-size:36px;}}
.tagline-mark{margin-top:14px;font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:19px;color:var(--orchid-dark);}
.hero .lede{margin-top:20px;font-size:18px;color:#463C4E;max-width:520px;}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}
.hero-note{margin-top:16px;font-size:13px;color:var(--taupe);}

.stat-row{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap;}
.stat-row .stat b{display:block;font-family:'Fraunces',serif;font-size:32px;color:var(--plum-deep);}
.stat-row .stat span{font-size:13px;color:var(--taupe);}
.stat-row .stat.coral b{color:var(--coral-deep);}
.stat-row .stat.mint b{color:var(--mint-deep);}

/* ---------- Dark hero variant (experimental) --------------------------------
   Everything scoped under .hero so it's a self-contained, easy-to-remove
   block rather than edits to the base rules above — flip it off by
   deleting this block and the `background:var(--plum-deep)` line, no other
   cleanup needed. */
.hero{background:var(--plum-deep);}
.hero .eyebrow-line .bar{background:var(--aqua);}
.hero .eyebrow-line span{color:var(--aqua);}
.hero h1{color:#fff;}
.hero .tagline-mark{color:var(--aqua);}
.hero .lede{color:#C9BDD1;}
.hero .hero-note{color:#9C8FA8;}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35);}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.hero .stat-row .stat b{color:#fff;}
.hero .stat-row .stat span{color:#9C8FA8;}
/* the rank-card reads as a frosted glass panel floating on the dark hero,
   rather than the solid-dark card it is on a light hero (which would all
   but disappear against a dark background). position:relative + overflow:
   hidden here is what clips the shimmer sweep (below) to the card's own
   rounded corners — safe to pair with backdrop-filter since this card has
   no position:fixed descendants of its own to break. */
.hero .rank-card{position:relative;overflow:hidden;background:rgba(255,255,255,.07);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.35);}
.hero .rank-card .rc-head .rc-count{background:rgba(255,255,255,.12);}
.hero .rank-row{background:rgba(255,255,255,.06);}
.hero .rc-foot{border-top-color:rgba(255,255,255,.14);}

/* ---------- Rank-card: looped "live product" animation --------------------
   Three infinite loops layered on the same card: (1) the requisition title
   crossfades between openings every ~3.2s (JS in main.js toggles
   .is-active among .rc-title-item), (2) a soft diagonal shimmer sweeps the
   glass card, (3) the #1-ranked row gets a slow breathing glow, as if the
   AI is still actively holding it as the top match. All disabled under
   prefers-reduced-motion via the global rule that forces every
   animation-duration to ~0. */
.rc-head-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rc-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#9C8FA8;}
.rc-title{position:relative;display:block;height:19px;font-size:13.5px;font-weight:700;color:#fff;}
.rc-title-item{position:absolute;inset:0;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);}
.rc-title-item.is-active{opacity:1;transform:translateY(0);}

@keyframes rc-pulse{
  0%{box-shadow:0 0 0 0 rgba(95,199,48,.55);}
  70%{box-shadow:0 0 0 9px rgba(95,199,48,0);}
  100%{box-shadow:0 0 0 0 rgba(95,199,48,0);}
}
.rc-foot .pulse{animation:rc-pulse 2.2s ease-out infinite;}

@keyframes rc-shimmer{
  0%{transform:translateX(-60%) rotate(8deg);}
  100%{transform:translateX(320%) rotate(8deg);}
}
.hero .rank-card::after{
  content:'';position:absolute;top:-50%;left:0;width:35%;height:200%;
  background:linear-gradient(75deg, transparent, rgba(255,255,255,.10), transparent);
  animation:rc-shimmer 5.5s ease-in-out infinite;
  animation-delay:1.4s;
  pointer-events:none;
}

@keyframes rc-row-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(56,198,222,0);}
  50%{box-shadow:0 0 26px 3px rgba(56,198,222,.22);}
}
.rank-row.is-top{animation:rc-row-glow 3.6s ease-in-out infinite;}

/* ---------- Hero (inner pages: centered, no split visual) ---------------- */
.hero-simple{padding:60px 0 68px;position:relative;overflow:hidden;}
.hero-simple::before{
  content:"";position:absolute;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(74,46,155,.14), transparent 70%);pointer-events:none;
}
.hero-simple .wrap{position:relative;max-width:760px;text-align:left;}
.hero-simple.center .wrap{text-align:center;margin:0 auto;}
.hero-simple h1{font-size:44px;}
@media (max-width:720px){.hero-simple h1{font-size:32px;}}
.hero-simple .lede{margin-top:18px;font-size:17px;color:#463C4E;max-width:600px;}
.hero-simple.center .lede{margin-left:auto;margin-right:auto;}
.hero-simple .hero-cta{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;}
.hero-simple.center .hero-cta{justify-content:center;}

/* ---------- Ranked shortlist visual (home hero) --------------------------*/
.rank-card{background:var(--plum-deep);border-radius:20px;padding:26px;color:#fff;box-shadow:var(--shadow-l);}
.rank-card .rc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.rank-card .rc-head .rc-title{font-size:13.5px;font-weight:700;color:#D8CEE0;}
.rank-card .rc-head .rc-count{font-size:12px;color:#9C8FA8;background:var(--plum-line);padding:4px 10px;border-radius:999px;}
.rank-row{display:flex;align-items:center;gap:12px;background:#2A2058;border-radius:12px;padding:12px 14px;margin-bottom:9px;}
.rank-row .num{width:22px;font-family:'Fraunces',serif;font-size:15px;color:#8A7C94;}
.rank-row .avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--plum-deep);flex-shrink:0;}
.rank-row .info{flex:1;min-width:0;}
.rank-row .name{font-size:14px;font-weight:700;}
.rank-row .role{font-size:12px;color:#9C8FA8;}
.rank-row .score{font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:var(--mint);}
.rc-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--plum-line);}
.rc-foot .pulse{width:7px;height:7px;border-radius:50%;background:var(--mint);flex-shrink:0;}
.rc-foot span{font-size:12px;color:#9C8FA8;}

/* ---------- Trust bar -----------------------------------------------------*/
.trust{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.trust .label{font-size:12.5px;font-weight:700;color:var(--taupe);}
.trust .brands{display:flex;gap:30px;flex-wrap:wrap;align-items:center;}
.trust .brands span{font-family:'Fraunces',serif;font-size:15px;color:#A99BAE;font-weight:600;}

/* ---------- Section shell -------------------------------------------------*/
section{padding:88px 0;}
@media (max-width:720px){section{padding:60px 0;}}
.section-tight{padding:56px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head .kicker{margin-bottom:12px;}
.section-head p{margin-top:14px;font-size:16.5px;color:#463C4E;}

/* ---------- How it works (steps) ------------------------------------------*/
.steps-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
@media (max-width:900px){.steps-wrap{grid-template-columns:1fr;}}
.step{border-right:1px solid var(--line);padding:30px 26px 0;}
.step:last-child{border-right:none;}
@media (max-width:900px){.step{border-right:none;border-bottom:1px solid var(--line);padding-bottom:26px;}}
.step .step-num{font-family:'Fraunces',serif;font-size:14px;color:var(--orchid);font-weight:600;}
.step h3{font-size:19px;margin-top:10px;}
.step p{font-size:14.5px;color:#5A4E62;margin-top:9px;}

/* ---------- Feature grid ---------------------------------------------------*/
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;}
@media (max-width:860px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr;}}
.feat{background:#fff;padding:28px 24px;}
.feat .fi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.feat h3{font-size:16.5px;margin-bottom:8px;}
.feat p{font-size:13.8px;color:#5A4E62;}

/* ---------- Feature card accent (Core Platform grid) ------------------------
   Ported from the reference mockup (jwalix-core-platform.html): each card
   carries a `data-accent` driving its own colour — the illustration's tinted
   stage, the "Explore" link, and a hover-reveal underline bar — instead of
   every card sharing one flat brand tint. The five named tokens and their
   tints are the reference's own palette, scoped to .core-platform-section
   (not :root) so they can't collide with this site's own --sky/--mint
   tokens used elsewhere. */
.core-platform-section{
  --amber:#c97a25;  --amber-tint:#faf0e1;
  --indigo:#3d4fe0; --indigo-tint:#eef0fd;
  --mint:#1f8f68;   --mint-tint:#e9f6ef;
  --sky:#2c86ad;    --sky-tint:#e9f4f8;
  --lilac:#7462d8;  --lilac-tint:#f0edfb;
}
.feat[data-accent]{position:relative;}
.feat[data-accent]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--card-accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out);}
.feat[data-accent]:hover::after{transform:scaleX(1);}
.feat[data-accent="amber"]  { --card-accent:var(--amber); }
.feat[data-accent="sky"]    { --card-accent:var(--sky); }
.feat[data-accent="indigo"] { --card-accent:var(--indigo); }
.feat[data-accent="mint"]   { --card-accent:var(--mint); }
.feat[data-accent="lilac"]  { --card-accent:var(--lilac); }

.feat[data-accent="amber"] .card-illus  { background:var(--amber-tint); }
.feat[data-accent="sky"] .card-illus    { background:var(--sky-tint); }
.feat[data-accent="indigo"] .card-illus { background:var(--indigo-tint); }
.feat[data-accent="mint"] .card-illus   { background:var(--mint-tint); }
.feat[data-accent="lilac"] .card-illus  { background:var(--lilac-tint); }

.card-illus{height:200px;display:flex;align-items:center;justify-content:center;}
.card-illus svg{width:100%;height:100%;display:block;transition:transform .5s var(--ease-out);}
.feat:hover .card-illus svg{transform:scale(1.045);}

.explore{font-size:14px;font-weight:600;color:var(--card-accent);text-decoration:none;position:relative;padding-bottom:2px;display:inline-block;border-bottom:1px solid var(--card-accent);transition:border-color .2s ease, color .2s ease, transform .25s var(--ease-out);}
.explore:hover{transform:translateX(3px);}

/* ---------- Core Platform illustrations (ported from the reference mockup) -
   Each scene's "hero" shapes use var(--card-accent), so they always match
   the card's own accent/underline/link colour; muted label text keeps the
   reference's own hex (legibility-tuned, not meant to shift per accent). */
/* Illustration 1: Job Management */
.req-box{fill:#fff;stroke:var(--card-accent);stroke-width:1.4;}
.req-line{stroke:#d8c6a8;stroke-width:3;stroke-linecap:round;}
.channel{fill:#fff;stroke:var(--card-accent);stroke-width:1.4;}
.channel-label{font-family:'Inter';font-size:8.5px;fill:#7a5a2c;font-weight:600;}
.pulse-ring{fill:none;stroke:var(--card-accent);stroke-width:1.4;opacity:0;}
.p1{animation:jobPulse 3.6s ease-in-out infinite;}
.p2{animation:jobPulse 3.6s ease-in-out infinite;animation-delay:1.2s;}
.p3{animation:jobPulse 3.6s ease-in-out infinite;animation-delay:2.4s;}
@keyframes jobPulse{
  0%{opacity:0;transform:scale(0.6);transform-origin:center;}
  15%{opacity:.9;}
  55%{opacity:0;transform:scale(1.9);transform-origin:center;}
  100%{opacity:0;}
}
.dot{fill:var(--card-accent);}
.d1{offset-path:path("M112,64 C150,64 150,40 186,40");animation:travel 3.6s ease-in-out infinite;}
.d2{offset-path:path("M112,64 C150,64 150,64 186,64");animation:travel 3.6s ease-in-out infinite;animation-delay:1.2s;}
.d3{offset-path:path("M112,64 C150,64 150,90 186,90");animation:travel 3.6s ease-in-out infinite;animation-delay:2.4s;}
@keyframes travel{
  0%{offset-distance:0%;opacity:0;}
  6%{opacity:1;}
  28%{offset-distance:100%;opacity:1;}
  34%{opacity:0;}
  100%{opacity:0;offset-distance:100%;}
}

/* Illustration 2: Candidate Management */
.skel{fill:#cfd8f5;}
.sk{animation:shimmer 2.8s ease-in-out infinite;}
.sk2{animation-delay:.2s;} .sk3{animation-delay:.4s;} .sk4{animation-delay:.6s;}
@keyframes shimmer{
  0%,100%{opacity:.5;}
  50%{opacity:1;}
}
.chip{fill:#fff;stroke:var(--card-accent);stroke-width:1.2;opacity:0;animation:chipIn 4s ease-in-out infinite;}
.chip-txt{font-family:'Inter';font-size:8.5px;fill:var(--card-accent);font-weight:600;opacity:0;animation:chipIn 4s ease-in-out infinite;}
.c2{animation-delay:.35s;} .c3{animation-delay:.7s;}
@keyframes chipIn{
  0%{opacity:0;transform:translateX(-6px);}
  12%{opacity:1;transform:translateX(0);}
  80%{opacity:1;}
  92%{opacity:0;}
  100%{opacity:0;}
}
.ring-bg{fill:none;stroke:#e3e8fb;stroke-width:5;}
.ring-fg{fill:none;stroke:var(--card-accent);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:132;stroke-dashoffset:132;
  transform:rotate(-90deg);transform-origin:center;
  animation:ringFill 4s ease-in-out infinite;}
@keyframes ringFill{
  0%{stroke-dashoffset:132;}
  55%{stroke-dashoffset:11;}
  85%{stroke-dashoffset:11;}
  100%{stroke-dashoffset:132;}
}
.ring-txt{font-family:'Inter';font-size:11px;font-weight:700;fill:var(--card-accent);}

/* Illustration 3: Applicant Tracking */
.fbar-bg{fill:#dcefe6;}
.fbar-fg{fill:var(--card-accent);transform:scaleX(0);animation:fillBar 4s ease-in-out infinite;transform-box:fill-box;}
.fb1{animation-delay:0s;} .fb2{animation-delay:.28s;} .fb3{animation-delay:.56s;}
.fb4{animation-delay:.84s;} .fb5{animation-delay:1.12s;}
@keyframes fillBar{
  0%{transform:scaleX(0);}
  18%{transform:scaleX(1);}
  85%{transform:scaleX(1);}
  100%{transform:scaleX(0);}
}
.fnum{font-family:'Inter';font-size:8.5px;fill:#1f8f68;font-weight:700;}

/* Illustration 4: Interview Management */
.gridline{stroke:#cfe2ea;stroke-width:1;}
.slot{fill:var(--card-accent);opacity:0;animation:slotIn 3.2s ease-in-out infinite;rx:2;}
.s1{animation-delay:0s;} .s2{animation-delay:.4s;} .s3{animation-delay:.8s;}
.s4{animation-delay:1.2s;} .s5{animation-delay:1.6s;}
@keyframes slotIn{
  0%{opacity:0;transform:scale(.7);transform-origin:center;}
  10%{opacity:1;transform:scale(1);}
  75%{opacity:1;}
  90%{opacity:0;}
  100%{opacity:0;}
}
.daylabel{font-family:'Inter';font-size:7.5px;fill:#4b7f95;font-weight:600;}

/* Illustration 5: Reporting & Analytics */
.rbar{fill:var(--indigo);transform:scaleY(0);animation:growBar 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom;}
.r1{animation-delay:0s;} .r2{animation-delay:.15s;} .r3{animation-delay:.3s;}
.r4{animation-delay:.45s;} .r5{animation-delay:.6s;} .r6{animation-delay:.75s;}
@keyframes growBar{
  0%{transform:scaleY(0);}
  35%{transform:scaleY(1);}
  80%{transform:scaleY(1);}
  100%{transform:scaleY(0);}
}
.donut-bg{fill:none;stroke:#e3e8fb;stroke-width:6;}
.donut-fg{fill:none;stroke:var(--card-accent);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:113;stroke-dashoffset:113;
  transform:rotate(-90deg);transform-origin:center;
  animation:donutDraw 3.4s ease-in-out infinite;}
@keyframes donutDraw{
  0%{stroke-dashoffset:113;}
  50%{stroke-dashoffset:40;}
  85%{stroke-dashoffset:40;}
  100%{stroke-dashoffset:113;}
}

/* Illustration 6: AI Features */
.bot-core{fill:var(--card-accent);}
.bot-ping{fill:none;stroke:var(--card-accent);stroke-width:1.2;opacity:0;
  animation:ping 2.6s ease-out infinite;transform-origin:center;}
@keyframes ping{
  0%{opacity:.6;transform:scale(.6);}
  100%{opacity:0;transform:scale(1.9);}
}
.airow{fill:#fff;stroke:#ddd6f7;stroke-width:1;opacity:0;animation:airowIn 3.6s ease-in-out infinite;}
.a2{animation-delay:.3s;} .a3{animation-delay:.6s;}
@keyframes airowIn{
  0%{opacity:0;transform:translateX(6px);}
  15%{opacity:1;transform:translateX(0);}
  85%{opacity:1;}
  100%{opacity:0;}
}
.aitxt{font-family:'Inter';font-size:8px;fill:#3a3660;font-weight:600;}
.aipct{font-family:'Inter';font-size:8px;fill:var(--card-accent);font-weight:700;}

.feat-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (max-width:720px){.feat-grid-2{grid-template-columns:1fr;}}
.feat-card{border:1.5px solid var(--line);border-radius:var(--radius-m);padding:28px;background:#fff;transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.feat-card:hover{border-color:var(--orchid);box-shadow:var(--shadow-s);transform:translateY(-2px);}

/* ---------- Two audiences / card comparisons -------------------------------*/
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:800px){.aud-grid{grid-template-columns:1fr;}}
.aud-card{border-radius:18px;padding:36px;border:1.5px solid var(--line);background:#fff;}
.aud-card.filled{background:var(--plum-deep);border-color:var(--plum-deep);color:#fff;}
.aud-card.filled h3, .aud-card.filled p{color:#fff;}
.aud-card .tag{font-size:12.5px;font-weight:700;color:var(--orchid-dark);margin-bottom:14px;}
.aud-card.filled .tag{color:var(--aqua);}
.aud-card h3{font-size:23px;margin-bottom:10px;}
.aud-card p{font-size:14.5px;color:#5A4E62;margin-bottom:20px;}
.aud-card ul{margin-bottom:26px;}
.aud-card li{font-size:14px;padding:8px 0;border-top:1px solid var(--line);display:flex;gap:10px;}
.aud-card.filled li{border-top:1px solid var(--plum-line);}
.aud-card li:first-child{border-top:none;}
.aud-card li svg{flex-shrink:0;margin-top:3px;}

/* ---------- Fairness / feature strip ---------------------------------------*/
.fair{background:var(--aqua-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.fair-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
@media (max-width:800px){.fair-grid{grid-template-columns:1fr;}}
.fair-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.fair-badges span{font-size:12.5px;font-weight:700;background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;color:var(--plum-deep);}
/* Text-block + .mock-browser split section, repeated across every product
   and solutions page. Was shipped as an inline style="display:grid;..." on
   each page instead of a class, so none of them ever got a mobile
   breakpoint - below 800px the two columns kept squeezing side by side
   instead of stacking, cutting the .mock-browser column off-screen. */
.mock-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:800px){.mock-split{grid-template-columns:1fr;}}
/* Same bare inline-grid problem as .mock-split above, on sign-in/sign-up
   (visual left, content right) and request-demo (content left, form
   right). align-items varies per page, so it's left as a per-page inline
   override alongside the class rather than folded in here. */
.auth-split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
@media (max-width:800px){.auth-split{grid-template-columns:1fr;}}
.demo-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
@media (max-width:800px){.demo-split{grid-template-columns:1fr;}}
.fair-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;}
.fair-card p.fits{font-size:13.5px;color:var(--taupe);font-weight:700;margin-bottom:14px;}
.fair-card ul{display:flex;flex-direction:column;gap:14px;}
.fair-card li{font-size:14.5px;}
.fair-card li strong{color:var(--plum-deep);}

/* ---------- Testimonial -----------------------------------------------------*/
.quote-card{background:var(--plum-deep);border-radius:22px;padding:52px;color:#fff;position:relative;overflow:hidden;}
@media (max-width:720px){.quote-card{padding:32px 24px;}}
.quote-card blockquote{font-family:'Fraunces',serif;font-size:28px;font-weight:500;line-height:1.35;max-width:780px;}
@media (max-width:720px){.quote-card blockquote{font-size:21px;}}
.quote-card .attr{margin-top:24px;font-size:14px;color:#B7A9C0;}
.quote-stats{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap;border-top:1px solid var(--plum-line);padding-top:28px;}
.quote-stats .qs b{display:block;font-family:'Fraunces',serif;font-size:24px;color:var(--mint);}
.quote-stats .qs span{font-size:12px;color:#9C8FA8;}

/* ---------- Why choose / problems -------------------------------------------*/
.problem-list{border-top:1px solid var(--line);}
.problem-row{display:grid;grid-template-columns:210px 1fr 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start;}
@media (max-width:820px){.problem-row{grid-template-columns:1fr;gap:8px;padding:22px 0;}}
.problem-row .pnum{font-family:'Fraunces',serif;color:var(--taupe);font-size:14px;}
.problem-row .p-issue{font-size:12.5px;font-weight:700;color:var(--coral-deep);margin-bottom:6px;}
.problem-row .p-issue-t{font-size:17px;font-family:'Fraunces',serif;color:var(--plum-deep);}
.problem-row .p-fix{font-size:12.5px;font-weight:700;color:var(--mint-deep);margin-bottom:6px;}
.problem-row .p-fix-t{font-size:14.5px;color:#463C4E;}

/* ---------- FAQ accordion ----------------------------------------------------*/
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;background:none;border:none;width:100%;text-align:left;}
.faq-q span.q-text{font-size:16.5px;font-weight:700;color:var(--plum-deep);font-family:'Fraunces',serif;}
.faq-q .plus{width:20px;height:20px;flex-shrink:0;position:relative;}
.faq-q .plus::before, .faq-q .plus::after{content:"";position:absolute;background:var(--orchid);border-radius:2px;}
.faq-q .plus::before{width:14px;height:2px;top:9px;left:3px;}
.faq-q .plus::after{width:2px;height:14px;top:3px;left:9px;transition:transform .2s ease;}
.faq-item.open .plus::after{transform:rotate(90deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{font-size:14.5px;color:#5A4E62;padding-bottom:22px;max-width:680px;}
.faq-item.open .faq-a{max-height:500px;}

/* ---------- Pricing ----------------------------------------------------------*/
/* auto-fit + justify-content:center (rather than a fixed repeat(N,1fr))
   so the row of cards is centered in the container regardless of how many
   plans there are, instead of hugging the left edge when there are fewer
   cards than grid columns */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,380px));gap:22px;align-items:stretch;justify-content:center;}
@media (max-width:940px){.price-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}}
.price-card{border:1.5px solid var(--line);border-radius:var(--radius-l);padding:32px;background:#fff;display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease;}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);}
.price-card.featured{background:var(--plum-deep);border-color:var(--plum-deep);color:#fff;position:relative;}
.price-card.featured h3,.price-card.featured .price-desc{color:#fff;}
.price-card .price-badge{position:absolute;top:-13px;left:32px;background:var(--mint);color:var(--plum-deep);font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:999px;}
.price-card .tag{font-size:12.5px;font-weight:700;color:var(--orchid-dark);margin-bottom:10px;}
.price-card.featured .tag{color:var(--aqua);}
.price-card h3{font-size:21px;}
.price-card .price-amount{font-family:'Fraunces',serif;font-size:38px;margin-top:14px;color:var(--plum-deep);}
.price-card.featured .price-amount{color:#fff;}
.price-card .price-amount span{font-size:14px;font-weight:500;color:var(--taupe);}
.price-card.featured .price-amount span{color:#B7A9C0;}
.price-desc{font-size:13.8px;color:#5A4E62;margin-top:8px;}
.price-card ul{margin:24px 0 28px;display:flex;flex-direction:column;gap:11px;}
.price-card li{font-size:14px;display:flex;gap:9px;align-items:flex-start;}
.price-card .btn{margin-top:auto;}

/* ---------- Pricing controls (billing cycle + region toggles) -------------- */
.pricing-controls{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.toggle-group{display:inline-flex;background:var(--orchid-tint);border-radius:999px;padding:4px;gap:2px;}
.toggle-btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--plum);background:transparent;border:0;
  transition:background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.toggle-btn:hover{color:var(--orchid-dark);}
.toggle-btn.is-active{background:#fff;color:var(--orchid-dark);box-shadow:var(--shadow-s);}
.toggle-btn .toggle-save{
  font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--mint-deep);background:var(--mint-tint);
  padding:2px 8px;border-radius:999px;
}
.toggle-btn.is-active .toggle-save{color:var(--mint-deep);}

/* ---------- Comparison table ---------------------------------------------- */
.compare-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-m);}
table.compare-table{width:100%;border-collapse:collapse;min-width:560px;background:#fff;}
.compare-table th,.compare-table td{padding:16px 20px;text-align:left;font-size:14px;border-bottom:1px solid var(--line);}
.compare-table thead th{font-family:'Fraunces',serif;font-size:16px;color:var(--plum-deep);background:var(--orchid-tint);}
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table td.row-label{font-weight:700;color:var(--plum-deep);}
.compare-table .yes{color:var(--mint-deep);font-weight:700;}
.compare-table .no{color:var(--coral-deep);}
.compare-disclaimer{margin-top:14px;font-size:12.5px;color:var(--taupe);}

/* ---------- Card grids: blog / docs / guides / help ------------------------ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:940px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr;}}
.content-card{border:1.5px solid var(--line);border-radius:var(--radius-m);background:#fff;padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.content-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-s);border-color:var(--orchid);}
.content-card .cc-tag{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--orchid-dark);}
.content-card h3{font-size:18px;}
.content-card p{font-size:13.8px;color:#5A4E62;}
.content-card .cc-meta{margin-top:auto;font-size:12.5px;color:var(--taupe);display:flex;gap:8px;align-items:center;}

.split-layout{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start;}
@media (max-width:860px){.split-layout{grid-template-columns:1fr;}}
.side-nav{position:sticky;top:100px;border-right:1px solid var(--line);padding-right:24px;}
@media (max-width:860px){.side-nav{position:static;border-right:none;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:20px;}}
.side-nav h4{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--taupe);margin-bottom:12px;}
.side-nav ul{display:flex;flex-direction:column;gap:2px;margin-bottom:22px;}
.side-nav a{display:block;padding:8px 10px;margin:0 -10px;border-radius:8px;font-size:14px;color:#463C4E;}
.side-nav a:hover{background:var(--orchid-tint);color:var(--orchid-dark);}
.side-nav a.active{background:var(--orchid-tint);color:var(--orchid-dark);font-weight:700;}
.article-body h2{font-size:24px;margin-top:40px;margin-bottom:14px;}
.article-body h2:first-child{margin-top:0;}
.article-body h3{font-size:19px;margin-top:28px;margin-bottom:10px;}
.article-body p{font-size:15.5px;color:#463C4E;margin-bottom:14px;}
.article-body ul,.article-body ol{margin:0 0 16px;padding-left:22px;list-style:disc;}
.article-body ol{list-style:decimal;}
.article-body li{font-size:15px;color:#463C4E;margin-bottom:8px;}
.article-body code{background:var(--orchid-tint);padding:2px 6px;border-radius:4px;font-size:13.5px;}

/* ---------- Marquee (university/logo strip) --------------------------------*/
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{font-family:'Fraunces',serif;font-size:16px;color:#A99BAE;font-weight:600;white-space:nowrap;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Forms (contact / request-demo / sign-in / sign-up) ------------- */
.form-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-l);padding:36px;}
/* shown in place of the form for a few seconds after submit (see the
   request-demo page script), then the form comes back — no page reload,
   no separate confirmation page */
.form-success-panel{text-align:center;padding:20px 8px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-size:13px;font-weight:700;color:var(--plum-deep);}
.field input,.field select,.field textarea{
  font:inherit;font-size:14.5px;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orchid);box-shadow:0 0 0 3px var(--orchid-tint);}
.field textarea{resize:vertical;min-height:110px;}
.field .hint{font-size:12px;color:var(--taupe);}
.auth-card{max-width:420px;margin:0 auto;}
.auth-card .auth-foot{margin-top:20px;text-align:center;font-size:13.5px;color:var(--taupe);}
.auth-card .auth-foot a{color:var(--orchid-dark);font-weight:700;}

/* ---------- CTA -------------------------------------------------------------*/
.cta-final{background:linear-gradient(135deg, var(--orchid) 0%, var(--plum-deep) 100%);border-radius:var(--radius-xl);padding:64px 48px;text-align:center;color:#fff;}
@media (max-width:720px){.cta-final{padding:44px 24px;}}
.cta-final h2{color:#fff;font-size:32px;}
.cta-final p{color:#EEDDEC;margin-top:14px;font-size:16px;}
.cta-final .btn-primary{background:#fff;color:var(--orchid-dark);}
.cta-final .btn-primary:hover{background:var(--orchid-tint);}
.cta-final .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;}
.cta-final .cta-row{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;}

/* ---------- Footer -----------------------------------------------------------*/
footer.site-footer{background:var(--plum-deep);color:#C9BDD1;padding:64px 0 32px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-grid h4{font-size:12.5px;font-weight:800;letter-spacing:.03em;color:#8A7C94;margin-bottom:16px;}
.foot-grid li{margin-bottom:10px;font-size:13.8px;}
.foot-grid a:hover{color:#fff;}
.foot-logo{font-family:'Fraunces',serif;font-weight:700;font-size:20px;color:#fff;margin-bottom:12px;}
.foot-desc{font-size:13.8px;max-width:230px;color:#9C8FA8;}
.foot-social{display:flex;gap:10px;margin-top:18px;}
.foot-social a{width:32px;height:32px;border-radius:50%;background:var(--plum-line);display:flex;align-items:center;justify-content:center;transition:background .15s ease;}
.foot-social a:hover{background:var(--orchid);color:#ffffff}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--plum-line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#8A7C94;}
/* .foot-social's own margin-top:18px assumes it sits stacked below other
   content (its only other intended placement); inline in this flex row
   alongside the copyright line, that just pushes it out of alignment. */
.foot-bottom .foot-social{margin-top:0;}

/* ---------- Error pages (400/404/500/505) -------------------------------------*/
.error-page{min-height:calc(100vh - 90px);display:flex;align-items:center;padding:60px 0;}
.error-page .wrap{text-align:center;max-width:560px;}
.error-code{font-family:'Fraunces',serif;font-size:104px;color:var(--orchid);line-height:1;}
.error-page h1{font-size:28px;margin-top:12px;}
.error-page p{margin-top:14px;font-size:15.5px;color:#463C4E;}
.error-page .hero-cta{justify-content:center;margin-top:28px;}

/* ---------- Scroll-reveal + counter animation utilities ---------------------- */
[data-reveal]{opacity:0;translate:0 22px;transition:opacity .6s var(--ease-out), translate .6s var(--ease-out);transition-delay:var(--reveal-delay, 0ms);}
[data-reveal].in-view{opacity:1;translate:0 0;}
[data-reveal="fade"]{translate:0 0;}
[data-reveal="left"]{translate:-22px 0;}
[data-reveal="left"].in-view{translate:0 0;}
[data-reveal="right"]{translate:22px 0;}
[data-reveal="right"].in-view{translate:0 0;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;translate:0 !important;transition:none !important;}
}

/* ---------- Dark section band (e.g. "AI built into the workflow") ---------- */
.section-dark{background:var(--plum-deep);color:#fff;position:relative;}
.section-dark h2{color:#fff;}
.section-dark .kicker{color:var(--aqua);}
.section-dark .section-head p,
.section-dark .team-desc{color:#C9BDD1;}
/* Same corner glow style as the homepage hero's right side
   (.hv2-section::before) - reused rather than duplicated, so both dark
   sections stay visually consistent with the hero and each other.
   Deliberately its own sibling layer (.section-glow, a real element right
   before .wrap in the markup) rather than a `.section-dark::before`
   pseudo-element clipped via `overflow:hidden` on .section-dark itself:
   .section-dark also wraps the "Built for your team" section's
   .team-sticky-left/.team-card, both `position:sticky` - overflow:hidden
   on ANY ancestor of a sticky element replaces the page scroll as its
   reference container and silently breaks the sticky effect. Clipping the
   glow on its own dedicated layer instead means .section-dark's own
   overflow never has to change. */
.section-glow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
.section-glow::before{content:"";position:absolute;width:640px;height:640px;background:radial-gradient(circle, rgba(91,61,245,0.28), transparent 70%);top:-180px;right:0;}
/* Keeps the section's real content (kicker/heading/cards) painted above
   the glow layer, which precedes .wrap in the DOM and would otherwise
   stack on top of it as a positioned z-index:auto element. */
.section-dark > .wrap{position:relative;z-index:1;}
.feat-grid.dark{background:var(--plum-line);border-color:var(--plum-line);}
.feat-grid.dark .feat{background:#2A2058;}
.feat-grid.dark .feat h3{color:#fff;}
.feat-grid.dark .feat p{color:#B7A9C0;}

/* ---------- Action cards (e.g. "AI, built into the workflow") --------------
   Dark cards with one permanently-highlighted "featured" card, each linking
   to its own product page — icon, title, body, Read More + circular arrow
   pinned to the bottom via flex. Icons use stroke="currentColor" (not a
   hardcoded var()) specifically so :hover can flip icon + text color with
   a single `color` change instead of overriding every path. Per the
   actions.png reference, the accent highlight is a HOVER state on
   whichever card the pointer is over — not a permanently-featured card. */
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:900px){.action-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.action-grid{grid-template-columns:1fr;}}
.action-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:270px;
  background:#2A2058;border-radius:var(--radius-l);padding:28px 26px;color:#fff;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s ease, color .25s ease;
}
.action-card:hover,.action-card:focus-visible{
  transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.35);
  background:var(--aqua);color:var(--plum-deep);
}
.action-card .ac-icon{
  width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background-color .25s ease;
}
.action-card:hover .ac-icon,.action-card:focus-visible .ac-icon{background:rgba(33,21,64,.12);}
.action-card h3{color:#fff;font-size:18px;transition:color .25s ease;}
.action-card:hover h3,.action-card:focus-visible h3{color:var(--plum-deep);}
.action-card p{color:#B7A9C0;font-size:13.5px;line-height:1.5;transition:color .25s ease;}
.action-card:hover p,.action-card:focus-visible p{color:#1E3A45;}
.action-card .ac-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  transition:color .25s ease;
}
.action-card:hover .ac-more,.action-card:focus-visible .ac-more{color:var(--plum-deep);}
.action-card .ac-arrow{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:transform .2s ease, background-color .25s ease;
}
.action-card:hover .ac-arrow,.action-card:focus-visible .ac-arrow{transform:translateX(3px);background:rgba(33,21,64,.14);}

/* ---------- Mock browser window (illustrative product preview) ------------- */
.mock-browser{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-m);overflow:hidden;}
.mock-browser__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line);}
.mock-browser__dot{width:9px;height:9px;border-radius:50%;background:var(--line);}
.mock-browser__url{margin-left:8px;font-size:12px;color:var(--taupe);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px;flex:1;max-width:220px;}
.mock-browser__body{padding:18px;}
.mock-table{width:100%;border-collapse:collapse;}
.mock-table th{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--taupe);text-align:left;padding:0 10px 10px;}
.mock-table td{font-size:13.5px;padding:11px 10px;border-top:1px solid var(--line);color:#463C4E;}
.mock-table .mock-avatar{width:26px;height:26px;border-radius:50%;background:var(--orchid-tint);color:var(--orchid-dark);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-right:8px;vertical-align:middle;}
.mock-table .mock-stage{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--mint-tint);color:var(--mint-deep);}

/* ---------- "Live" candidates browser (homepage Recruitment automation, ----
   right side only) — ported from the reference mockup
   (jwalix-core-platform.html, "Recruitment automation split"). Scoped under
   .ra-browser (own class names, not .mock-browser/.mock-table, which are
   reused on 14+ other pages) so this doesn't touch anything else on the
   site. Colours are the reference's own one-off palette for this component,
   not the site's --orchid/--mint/etc tokens. */
.ra-browser{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-m);}
.ra-browser .browser-bar{display:flex;align-items:center;gap:16px;padding:13px 18px;background:var(--paper);border-bottom:1px solid var(--line);}
.ra-browser .traffic{display:flex;gap:7px;}
.ra-browser .traffic span{width:10px;height:10px;border-radius:50%;display:block;}
.ra-browser .traffic span:nth-child(1){background:#ec6a5e;}
.ra-browser .traffic span:nth-child(2){background:#f4bf4f;}
.ra-browser .traffic span:nth-child(3){background:#61c454;}
.ra-browser .url-bar{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:12.5px;color:var(--taupe);}
.ra-browser .table-head{display:grid;grid-template-columns:2fr 1fr .7fr 1fr;padding:14px 22px;font-size:10.5px;letter-spacing:.05em;color:#a39d86;font-weight:700;border-bottom:1px solid var(--line);text-transform:uppercase;}
.ra-browser .row{display:grid;grid-template-columns:2fr 1fr .7fr 1fr;align-items:center;padding:13px 22px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.ra-browser .row:last-child{border-bottom:none;}
.ra-browser .row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(61,79,224,.09), rgba(61,79,224,0) 55%);opacity:0;animation:raRowScan 5s ease-in-out infinite;}
.ra-browser .row:nth-child(2)::before{animation-delay:0s;}
.ra-browser .row:nth-child(3)::before{animation-delay:.7s;}
.ra-browser .row:nth-child(4)::before{animation-delay:1.4s;}
.ra-browser .row:nth-child(5)::before{animation-delay:2.1s;}
.ra-browser .row:nth-child(6)::before{animation-delay:2.8s;}
@keyframes raRowScan{0%{opacity:0;} 6%{opacity:1;} 22%{opacity:0;} 100%{opacity:0;}}
.ra-browser .cand{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);}
.ra-browser .avatar{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
.ra-browser .pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;}
.ra-browser .pill-screening{background:#e7f0fb;color:#2c6cad;}
.ra-browser .pill-interview{background:#eef0fd;color:#3d4fe0;}
.ra-browser .pill-offer{background:#faf0e1;color:#c97a25;}
.ra-browser .pill-applied{background:#e9f6ef;color:#1f8f68;}
.ra-browser .muted-cell{font-size:13px;color:#a9a493;}
.ra-browser .table-foot{display:flex;align-items:center;padding:14px 22px;font-size:12.5px;color:#a9a493;}
.ra-browser .live-dot{width:6px;height:6px;border-radius:50%;background:#1f8f68;display:inline-block;margin-right:8px;animation:raLivePulse 1.8s ease-in-out infinite;}
@keyframes raLivePulse{0%,100%{opacity:.4;transform:scale(.85);} 50%{opacity:1;transform:scale(1.15);}}
@media (prefers-reduced-motion: reduce){
  .ra-browser .row::before,.ra-browser .live-dot{animation:none !important;}
}

/* ---------- Pill link row (solutions-by-role) ------------------------------ */
.pill-row{display:flex;flex-wrap:wrap;gap:12px;}
.solution-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:14.5px;font-weight:700;color:var(--plum-deep);transition:border-color .2s ease, background .2s ease, transform .2s ease;}
.solution-pill:hover{border-color:var(--orchid);background:var(--orchid-tint);transform:translateY(-2px);}
.solution-pill svg{flex-shrink:0;}
.solution-pill .solution-arrow{transition:transform .2s ease;}
.solution-pill:hover .solution-arrow{transform:translateX(3px);}

/* ---------- "Built for your team" sticky title + stacking card scroll -----
   Left title/description sticks centered in the viewport (position:sticky;
   top:50%; translateY(-50%); align-self:start — the align-self is what
   lets a sticky item travel within a grid row instead of just filling it).
   The right column is a set of cards each pinned at its own (slightly
   increasing) sticky `top`, so as you scroll each new card slides up and
   stacks over the previous one instead of just replacing it. Degrades to a
   plain single column, no sticky/stacking, under 900px — the effect reads
   as scroll-jank rather than "premium" on a phone-sized viewport. */
.team-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
@media (max-width:900px){.team-grid{grid-template-columns:1fr;gap:28px;}}
/* top:50vh (not 50%) on purpose — a sticky element's percentage `top`
   resolves against its containing block (here, the grid row's ~1800px
   height from the 5 stacked cards), not the viewport, so 50% way
   overshoots the real "sticky" threshold and the title ends up pinned far
   too early, right up against the section's own top padding/divider.
   50vh is viewport-relative and actually centers it. */
.team-sticky-left{position:sticky;top:40vh;transform:translateY(-20%);align-self:start;}
.team-desc{margin-top:16px;font-size:16px;color:#463C4E;max-width:40ch;}
@media (max-width:900px){.team-sticky-left{position:static;transform:none;}}

.team-stack{display:flex;flex-direction:column;}
.team-card{
  position:sticky;
  display:flex;flex-direction:column;gap:14px;min-height:300px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:36px;margin-bottom:20px;
  box-shadow:0 20px 45px rgba(36,30,44,.12);
  transition:box-shadow .2s ease;
}
.team-card:last-child{margin-bottom:0;}
.team-card:hover{box-shadow:0 26px 54px rgba(36,30,44,.18);}
.team-card .tag{font-size:12.5px;font-weight:700;color:var(--orchid-dark);}
.team-card h3{font-size:22px;font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.01em;line-height:1.15;}
.team-card p{font-size:14.5px;color:#5A4E62;line-height:1.55;}
.team-card-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--plum-deep);}
.team-card-link svg{transition:transform .2s ease;}
.team-card:hover .team-card-link svg{transform:translateX(3px);}
@media (max-width:900px){.team-card{position:static;box-shadow:var(--shadow-s);}
  .team-card:hover{box-shadow:var(--shadow-s);}}

/* ---------- Generic hover-lift helper --------------------------------------
   Used on Core Platform / Product overview feature cards (.feat.hover-lift,
   each carrying a .fi icon tile) and the contact page's .feat-card. Lifts
   the whole card with a brand-tinted glow, and where a .fi icon tile is
   present, inverts it to a solid orchid fill with a small icon "pop" —
   the one consistent "alive" moment when you hover a feature card. */
.hover-lift{transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(74,46,155,.16);}
.hover-lift .fi{transition:background-color .25s var(--ease-out), transform .25s var(--ease-out);}
.hover-lift .fi svg,.hover-lift .fi svg *{transition:stroke .25s var(--ease-out);}
.hover-lift:hover .fi{background:var(--orchid) !important;transform:scale(1.08) rotate(-4deg);}
/* each icon's paths carry their own stroke="var(--x)" attribute directly,
   so the override has to target those descendants, not just the <svg> root,
   or the stroke attribute wins and the icon disappears into the new bg */
.hover-lift:hover .fi svg,.hover-lift:hover .fi svg *{stroke:#fff;}
.hover-lift h3{transition:color .2s ease;}
.hover-lift:hover h3{color:var(--orchid-dark);}

/* ---------- Hero illustration (inlined SVG, not <img>) ---------------------
   Inlined directly as <svg> markup rather than referenced via <img src=...>
   — an <img>-embedded SVG's own CSS keyframe animations never run in
   Chromium (verified directly: two screenshots a second apart came back
   byte-identical), so inlining is the only way the pipeline animation
   inside it actually plays. */
/* Fixed 420px height — taller than the SVG's own natural ~320px (at this
   column width) so the artwork itself visibly scales up, not just the
   frame around it. CSS object-fit:cover does NOT work on an inline <svg>
   root the same way it does on <img> (verified directly — it silently
   no-ops, the SVG just falls back to its native preserveAspectRatio); the
   actual equivalent is the `preserveAspectRatio="xMaxYMid slice"`
   attribute set on the <svg> element itself in the HTML, which scales the
   artwork to fully cover this box and crops the overflow — "xMax" biases
   that crop entirely onto the left edge (the illustration's decorative
   sidebar nav, and a sliver of the Sourced column), so the pipeline's
   right end — the Hired column, the summary bar — stays fully intact. */
.hero-illus{width:100%;height:420px;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.28);}
.hero-illus svg{display:block;width:100%;height:100%;}
@media (max-width:940px){.hero-illus{height:auto;}
  .hero-illus svg{height:auto;}}

/* ---------- Core Platform card illustrations --------------------------------
   Inlined (not <img src=...>) for the same reason as .hero-illus — an
   <img>-embedded SVG's own CSS keyframe animations never run in Chromium.
   No overlay/mask effect on top (a shimmer sweep was here and got pulled —
   read as a layer sitting over the artwork rather than animation happening
   in it). Instead each illustration's own internal loop (a highlighted
   dot/line pulsing) was turned up — see the per-file keyframe edits — so
   the "small, clear, within the card" animation is the real content
   animating, not a decoration on top of it. */
.card-illus{display:block;overflow:hidden;border-radius:var(--radius-m);border:1px solid var(--line);margin-bottom:16px;}
.card-illus svg{display:block;width:100%;height:auto;}

/* Utility */
.mt-0{margin-top:0;}
.text-center{text-align:center;}

/* =============================================================================
   Homepage hero v2 — ported from the reference mockup
   (jwalix-hero-redesign.html). Fully self-contained under .hv2: its own
   colour tokens (scoped here, NOT :root — the reference reuses names like
   --ink/--line that this site's :root already defines with very different,
   incompatible values) and its own hv2-prefixed classes throughout, since
   the reference's own names (.hero, .kicker, .btn, .stat, .tag, .avatar,
   .card, .info …) are all already used elsewhere on this site with
   different rules. Replaces the previous SVG-illustration hero entirely.
   ========================================================================= */
.hv2-section{
  --hv2-ink:#f1eeff;
  --hv2-ink-soft:#a49fc9;
  --hv2-bg:#0c0a17;
  --hv2-accent:#7d64ff;
  --hv2-accent-soft:rgba(125,100,255,0.14);
  --hv2-line:#2a2447;

  --hv2-dark-bg:#100d1c;
  --hv2-dark-panel:#1a1630;
  --hv2-dark-panel-2:#211c3c;
  --hv2-dark-line:#332c56;
  --hv2-dark-text:#f1eeff;
  --hv2-dark-text-dim:#948fb8;
  --hv2-green:#3ddc97;
  --hv2-green-soft:rgba(61,220,151,0.14);
  --hv2-amber:#f5b942;
  --hv2-amber-soft:rgba(245,185,66,0.14);

  background:var(--hv2-bg);
  color:var(--hv2-ink);
  display:flex;
  align-items:stretch;
  position:relative;
  overflow:hidden;
  /* Height is intrinsic to content (no forced 100vh) - with only 5 fixed
     candidates now cycling through the board, a full-viewport clamp left
     the kanban columns stretched far taller than their 1-2 cards actually
     need and squeezed the Recruiting Copilot feed underneath. Letting the
     section size itself means the board hugs its real content and the
     feed gets its natural place directly below it, both fully visible
     without scrolling. */
  /* Reaches up under the floating nav island by exactly the island's own
     footprint (16px top margin + 74px pill height — the same 90px other
     nav-relative rules on this site use, e.g. nav.primary's mobile-menu
     top:90px) so this section's own dark background is what shows behind
     the pill instead of the plain --paper body peeking through, touching
     the announce bar directly above it. padding-top puts that same space
     back so the actual left/right content still starts below the nav
     rather than under it.
     NOT --nav-bottom: that's the header's measured distance from the
     *viewport* top, which also bakes in the announce bar's own height —
     using it here would pull the hero up past the announce bar too. */
  margin-top:-90px;
  padding-top:90px;
}
/* Decorative corner glow lives on .hv2-section (the full-bleed element),
   NOT .hv2-right - .hv2-right sits inside .wrap, which is centered with a
   max-width, so a glow positioned relative to it stopped short of the
   actual browser edge on any screen wider than .wrap. Positioning it here
   instead means `right` resolves against the true viewport edge. */
.hv2-section::before{content:"";position:absolute;width:640px;height:640px;background:radial-gradient(circle, rgba(91,61,245,0.28), transparent 70%);top:-180px;right:-160px;pointer-events:none;}

/* Grid lives on the .wrap child, not .hero-section itself, so the hero's
   content lines up with every other section's max-width container instead
   of running edge-to-edge — only the dark background behind it is
   full-bleed. */
.hv2{display:grid;grid-template-columns:2fr 3fr;gap:48px;width:100%;}

/* ---------- LEFT ---------- */
.hv2-left{display:flex;flex-direction:column;justify-content:center;padding-top:6vw;}
.hv2-kicker{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;color:var(--hv2-accent);background:var(--hv2-accent-soft);border:1px solid var(--hv2-line);padding:7px 14px;border-radius:100px;width:fit-content;margin-bottom:28px;}
.hv2-kicker .hv2-dot{width:6px;height:6px;border-radius:50%;background:var(--hv2-green);box-shadow:0 0 0 3px var(--hv2-green-soft);animation:hv2HeartBeat 1.6s ease-in-out infinite;}
@keyframes hv2HeartBeat{0%,100%{opacity:.6;transform:scale(.85);} 50%{opacity:1;transform:scale(1.25);}}

.hv2-left h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.4rem, 4vw, 3.6rem);line-height:1.06;letter-spacing:-0.02em;margin:0 0 22px;color:var(--hv2-ink);}
.hv2-left h1 em{font-style:normal;color:var(--hv2-accent);}

.hv2-sub{font-family:'Manrope',sans-serif;font-size:1.08rem;line-height:1.6;color:var(--hv2-ink-soft);max-width:490px;margin:0 0 36px;}

.hv2-ctas{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.hv2-btn{font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;padding:14px 26px;border-radius:12px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .15s ease, box-shadow .15s ease;display:inline-block;}
.hv2-btn:hover{transform:translateY(-1px);}
.hv2-btn-primary{background:var(--hv2-accent);color:#fff;box-shadow:0 10px 24px -8px rgba(91,61,245,0.55);}
.hv2-btn-ghost{background:transparent;border-color:var(--hv2-line);color:var(--hv2-ink);}
.hv2-fine{font-family:'Manrope',sans-serif;font-size:12.5px;color:var(--hv2-ink-soft);opacity:0.75;}

.hv2-stats{display:flex;gap:32px;margin-top:48px;padding-top:28px;border-top:1px solid var(--hv2-line);flex-wrap:wrap;}
.hv2-stat b{display:block;font-family:'Fraunces',serif;font-size:1.5rem;color:var(--hv2-ink);}
.hv2-stat span{font-family:'Manrope',sans-serif;font-size:12.5px;color:var(--hv2-ink-soft);}

/* ---------- RIGHT ---------- */
.hv2-right{display:flex;align-items:center;justify-content:center;padding-top:32px;position:relative;}

.hv2-window{width:100%;max-width:none;background:var(--hv2-dark-panel);border:1px solid var(--hv2-dark-line);border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,0.65);position:relative;z-index:1;display:flex;flex-direction:column;}
.hv2-chrome{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--hv2-dark-line);}
.hv2-chrome .hv2-dots{display:flex;gap:6px;}
.hv2-chrome .hv2-dots i{width:9px;height:9px;border-radius:50%;display:block;}
.hv2-chrome .hv2-dots i:nth-child(1){background:#f5716a;}
.hv2-chrome .hv2-dots i:nth-child(2){background:#f5c451;}
.hv2-chrome .hv2-dots i:nth-child(3){background:#3ddc97;}
.hv2-chrome .hv2-url{margin-left:8px;font-family:'Manrope',sans-serif;font-size:12px;color:var(--hv2-dark-text-dim);background:var(--hv2-dark-panel-2);padding:5px 12px;border-radius:100px;}
.hv2-chrome .hv2-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.03em;color:var(--hv2-green);}
.hv2-chrome .hv2-live i{width:6px;height:6px;border-radius:50%;background:var(--hv2-green);animation:hv2Pulse 1.6s infinite;}
@keyframes hv2Pulse{0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.75);}}

.hv2-job-head{padding:18px 20px 14px;border-bottom:1px solid var(--hv2-dark-line);}
.hv2-job-head h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;margin:0 0 4px;color:var(--hv2-dark-text);}
.hv2-job-head p{margin:0;font-family:'Manrope',sans-serif;font-size:12.5px;color:var(--hv2-dark-text-dim);}
.hv2-job-head .hv2-tags{display:flex;gap:8px;margin-top:10px;}
.hv2-tag{font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;}
.hv2-tag.green{background:var(--hv2-green-soft);color:var(--hv2-green);}
.hv2-tag.blue{background:rgba(91,61,245,0.18);color:#9c8bff;}

.hv2-board{display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:10px;padding:16px;}
.hv2-col{background:var(--hv2-dark-panel-2);border:1px solid var(--hv2-dark-line);border-radius:10px;padding:8px;height:100%;display:flex;flex-direction:column;gap:8px;min-height:0;}
.hv2-col-head{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 6px;flex-shrink:0;}
.hv2-col-head span{font-family:'Manrope',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.04em;color:var(--hv2-dark-text-dim);}
.hv2-col-head b{font-family:'Manrope',sans-serif;font-size:11px;color:var(--hv2-dark-text);background:rgba(255,255,255,0.06);padding:1px 7px;border-radius:100px;min-width:18px;text-align:center;transition:transform .25s ease;}
.hv2-col-head b.bump{transform:scale(1.35);color:var(--hv2-green);}
/* Defensive only - the simulation is a fixed cast of 5 candidates that just
   cycle stages, so no column should ever actually overflow, but this keeps
   a column clipping internally instead of growing the board/window/hero
   if that ever changes. `hidden`, not `auto`: the card enter/exit keyframes
   (hv2CardIn/hv2CardOut) transform cards slightly past their resting
   position mid-animation, which was enough to trip an `auto` scrollbar into
   flashing on every stage change even though nothing was really overflowing. */
.hv2-col-body{display:flex;flex-direction:column;gap:7px;flex:1;min-height:0;overflow-y:hidden;position:relative;}

.hv2-card{background:#241f42;border:1px solid var(--hv2-dark-line);border-radius:8px;padding:8px 9px;display:flex;align-items:center;gap:8px;animation:hv2CardIn .45s cubic-bezier(.2,.8,.2,1);}
/* Taken out of flow the instant it starts leaving (not just at the delayed
   .remove() 380ms later) - a candidate moving stages briefly existed in
   BOTH its old column (fading) and its new column (already added) at once,
   which inflated that column's natural content height for the ~380ms
   overlap. Since every column shares one grid row height (.hv2-col's
   height:100%), that transient inflation raised the whole board/section's
   height for a moment - enough to flash the page scrollbar in and out on
   every stage change. Absolute-positioning the leaving card removes it
   from the height calculation immediately, so there's nothing left to
   double-count. */
.hv2-card.leaving{position:absolute;left:0;right:0;animation:hv2CardOut .4s ease forwards;pointer-events:none;}
@keyframes hv2CardIn{from{opacity:0;transform:translateY(6px) scale(0.96);} to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes hv2CardOut{to{opacity:0;transform:translateX(14px) scale(0.94);}}
.hv2-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;color:#100d1c;flex-shrink:0;}
.hv2-card .hv2-info b{display:block;font-family:'Manrope',sans-serif;font-size:11.5px;color:var(--hv2-dark-text);font-weight:600;line-height:1.2;}
.hv2-card .hv2-info span{font-family:'Manrope',sans-serif;font-size:10px;color:var(--hv2-dark-text-dim);}

.hv2-feed{border-top:1px solid var(--hv2-dark-line);padding:12px 20px 16px;}
.hv2-feed-label{font-family:'Manrope',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:0.04em;color:var(--hv2-dark-text-dim);margin-bottom:8px;}
.hv2-feed-list{display:flex;flex-direction:column;gap:7px;min-height:90px;position:relative;overflow:hidden;}
.hv2-feed-item{display:flex;align-items:center;gap:8px;font-family:'Manrope',sans-serif;font-size:12px;color:var(--hv2-dark-text-dim);animation:hv2FeedIn .4s ease;}
@keyframes hv2FeedIn{from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);}}
.hv2-feed-item .hv2-fdot{width:5px;height:5px;border-radius:50%;background:var(--hv2-accent);flex-shrink:0;}
.hv2-feed-item b{color:var(--hv2-dark-text);font-weight:600;}
/* Same fix as .hv2-card.leaving: pushFeed() keeps this item in the DOM for
   400ms after the list already has 5 (to fade it out) before removing it -
   with no overflow control here, that transient 5th item was a real,
   un-clipped layout-height increase on .hv2-feed-list (unlike the cards'
   purely transform-based overshoot), on every single stage change. Taking
   it out of flow the moment it starts fading removes that extra height
   immediately instead of waiting for the deferred .remove(). */
.hv2-feed-item.fading{position:absolute;left:0;right:0;opacity:0;transition:opacity .4s ease;}

@media (max-width: 900px){
  .hv2{grid-template-columns:1fr;gap:0;}
  .hv2-left{padding:12vw 0 8vw;max-width:none;}
  .hv2-right{padding:24px 0;}
  .hv2-board{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hv2-col:nth-child(4), .hv2-col:nth-child(5){display:none;}
  .hv2-stats{gap:24px;}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Back to top ---------------------------------------------------
   Fixed bottom-right, hidden until the page has scrolled down a bit (see
   main.js), fully hidden (not just opacity:0) via visibility so it can
   never be tab-focused or intercept clicks while off. Sits above the
   sticky header's z-index:100, since it can be visible at the same time. */
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:200;
  width:48px;height:48px;border-radius:50%;border:none;
  background:var(--orchid);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(74,46,155,.32);
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, background-color .15s ease, box-shadow .15s ease;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--orchid-dark);box-shadow:0 14px 30px rgba(74,46,155,.4);}
@media (max-width:640px){.back-to-top{right:16px;bottom:16px;width:44px;height:44px;}}

/* ---------- Home section-jump nav ------------------------------------------
   Fixed pill, bottom-center, home page only (the markup only exists in
   index.html). Shown once the hero has scrolled past and hidden again
   once the closing CTA band is reached — same is-visible pattern as
   .back-to-top — so it never competes with the hero's own CTAs and never
   floats over "Request a Demo" at the bottom. Centered via
   left:0/right:0/margin:auto on a max-content width rather than
   left:50%/translateX(-50%), so a mobile media query can just override
   left/right without also cancelling a horizontal transform. is-active
   tracks the section nearest the viewport centre (see main.js
   IntersectionObserver). */
.section-jump{
  position:fixed;left:0;right:0;bottom:24px;z-index:150;margin:0 auto;
  width:max-content;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:2px;overflow-x:auto;
  background:rgba(36,21,65,.92);backdrop-filter:blur(8px);
  border-radius:999px;padding:6px;box-shadow:var(--shadow-m);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.section-jump::-webkit-scrollbar{display:none;}
.section-jump.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.sj-link{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:999px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.68);
  transition:color .15s ease, background-color .15s ease;
}
.sj-icon{flex:none;}
.sj-link:hover{color:#fff;}
.sj-link.is-active{background:var(--orchid);color:#fff;}
@media (max-width:640px){
  .section-jump{bottom:80px;padding:5px;}
  .sj-link{padding:7px 12px;font-size:12.5px;gap:5px;}
}

/* ---------- Floating chat CTA (inner pages only) ---------------------------
   Bottom-center, like a persistent chat launcher — visible immediately on
   page load (not gated behind a scroll amount), and hidden again once the
   page's own closing CTA band is in view, so the same pitch doesn't show
   twice at once. Not included on the homepage at all, which has the
   section-jump nav (also bottom-center) instead. Dismissible via a close
   button; main.js remembers the dismissal in localStorage so a visitor
   who closes it doesn't see it again on their next page.

   The whole pill is the click target (role="link"/tabindex in the markup,
   navigation wired in main.js) — "Request a Demo" inside it is a visual
   label only (pointer-events:none), not a separate link, so there's a
   single obvious click target instead of a tiny button inside a bigger
   hover area. Centered the same width-independent way as .section-jump
   (left:50%/translateX(-50%) here since, unlike that pill, this one never
   needs horizontal scrolling, so the transform-cancelling trick isn't
   needed — the mobile query below just overrides the X translate). The
   avatar trio is a placeholder (flat colored circles) standing in for real
   team photos later. */
.chat-cta{
  position:fixed;left:50%;bottom:24px;z-index:150;
  transform:translate(-50%,12px);
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,var(--orchid) 0%,var(--orchid-dark) 100%);
  color:#fff;border-radius:999px;padding:8px 10px 8px 14px;
  box-shadow:0 20px 45px rgba(74,46,155,.38);
  cursor:pointer;max-width:calc(100% - 32px);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s, box-shadow .15s ease;
}
.chat-cta.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);}
.chat-cta:hover{box-shadow:0 24px 52px rgba(74,46,155,.48);}
.chat-cta-avatars{display:flex;flex:none;}
.chat-cta-avatar{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.85);flex:none;}
.chat-cta-avatar:not(:first-child){margin-left:-10px;}
.chat-cta-text{font-size:13.5px;font-weight:600;white-space:nowrap;}
.chat-cta-btn{
  padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap;
  background:#fff;color:var(--orchid-dark);pointer-events:none;
}
.chat-cta-close{
  flex:none;width:26px;height:26px;border-radius:50%;border:none;
  background:rgba(255,255,255,.18);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .15s ease;
}
.chat-cta-close:hover{background:rgba(255,255,255,.32);}
@media (max-width:760px){
  .chat-cta{left:16px;right:16px;transform:translateY(12px);max-width:none;}
  .chat-cta.is-visible{transform:translateY(0);}
  .chat-cta-text{white-space:normal;font-size:12.5px;}
  .chat-cta-avatars{display:none;}
}