/* ==========================================================================
   home_sept.css — September homepage
   --------------------------------------------------------------------------
   Layout only. Colour, radius and type come from brand.css (--ch-*) and
   style.css (--FontHeading*). Nothing here redefines a brand token.

   TYPE: Poppins is self-hosted in style.css as four SEPARATELY NAMED families
   ("Poppins", "Poppins Semibold", "Poppins Bold", "Poppins Black"), each
   registered at font-weight:normal. So a heading must name the face it wants
   via --FontHeading* and stay at font-weight:normal — asking for weight 700+
   on "Poppins" only synthesises a fake bold off Poppins-Regular, which is
   what made this page look wrong next to the rest of the site.

   BUTTONS: this page uses the site's .ch-btn / .ch-btn--primary /
   .ch-btn--secondary / .ch-arrow from brand.css, with the same gradient
   override every other page carries (see the <style> block in the template).
   There are deliberately no page-local page CTAs here.

   Class prefix `hs-` keeps this off Bootstrap and off style.css.
   ========================================================================== */

.hs {
  /* Accents lifted from culture_builder_v2.css so the palette matches */
  --hs-purple: #9c6bff;
  --hs-magenta: #ff4fd8;
  --hs-cyan: #22d3ee;
  --hs-emerald: #34d399;

  --hs-gutter: 24px;   /* matches --ch-gutter / .ch-container */
  --hs-section-y: clamp(44px, 4.6vw, 76px);
  --hs-grid: rgba(82, 98, 175, 0.06);

  font-family: var(--fontFamily);
  color: var(--ch-title);
  background: var(--ch-bg);
  overflow-x: clip;
}

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

.hs-wrap {
  width: 100%;
  max-width: var(--ch-max);
  margin-inline: auto;
  padding-inline: var(--hs-gutter);
  position: relative;
  z-index: 1;
}

.hs section { position: relative; }

/* Faint graph-paper ground, as on the PERMA and AI builder pages */
.hs-grid-bg {
  background-image:
    linear-gradient(to right, var(--hs-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hs-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Type — named faces, never synthesised weights ──────────────────────── */

.hs-display {
  font-family: var(--FontHeadingLg);   /* Poppins Bold — same face as .ch-h1 */
  font-weight: normal;
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.hs-h2 {
  font-family: var(--FontHeadingMd);   /* Poppins Semibold — same face as .ch-h2 */
  font-weight: normal;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.hs-h2--wide { max-width: 26ch; }

/* Headline emphasis. brand.css's own primitive is `.ch-accent { color:
   var(--ch-primary) }` — flat periwinkle — so that is what this page uses.
   The purple→magenta gradient here previously came from the AI-builder page,
   which is page-local and not part of the design system. */
.hs-grad { color: var(--ch-primary); }

.hs-h3 {
  font-family: var(--FontHeadingMd);   /* Poppins Semibold */
  font-weight: normal;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0;
}

.hs-lead {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ch-body);
  margin: 0;
  max-width: 56ch;
}

.hs-body { font-size: 15.5px; line-height: 1.62; color: var(--ch-body); margin: 0; max-width: 56ch; }
.hs-small { font-size: 13.5px; line-height: 1.55; color: var(--ch-muted); margin: 0; }

.hs-section-head { display: grid; gap: 14px; margin-bottom: 42px; }

/* ── Badge ──────────────────────────────────────────────────────────────── */

.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--ch-radius-pill);
  background: #fff;
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-shadow-sm);
  font-size: 13.5px;
  color: var(--ch-primary-deep);
}
.hs-badge__icon {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  background: var(--ch-primary-pale); color: var(--ch-primary);
}
.hs-badge__icon svg { width: 15px; height: 15px; display: block; }
.hs-badge__icon--violet { background: rgba(156, 107, 255, 0.14); color: #6d3fd1; }
.hs-badge__icon--coral  { background: #fff2e9; color: var(--ch-cta-deep); }
.hs-badge__icon--mint   { background: rgba(52, 211, 153, 0.16); color: #0f766e; }

/* The badge types itself out. The ghost is a full-strength copy of the string
   with `visibility: hidden`, so it reserves the pill's final width and the
   headline underneath never moves while the caret runs. */
.hs-type { position: relative; display: inline-block; white-space: nowrap; }
.hs-type__ghost { visibility: hidden; }
.hs-type__out { position: absolute; inset: 0; }
.hs-type__out::after {
  content: "";
  display: inline-block;
  width: 1.5px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.14em;
  background: currentColor;
  animation: hs-caret 1.05s steps(1) infinite;
}
.hs-badge--type.is-done .hs-type__out::after { animation: none; opacity: 0; }
@keyframes hs-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── The cycling word in the headline ───────────────────────────
   Width is set in pixels by JS and transitioned, which is what carries the
   full stop along with it. No overflow clipping: the words have descenders
   and a clip box tight enough to hide the swap would cut them. */
.hs-rotate {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transition: width 400ms cubic-bezier(.22, 1, .36, 1);
}
.hs-rotate__word {
  display: inline-block;
  transition: opacity 240ms ease, transform 240ms ease;
}
.hs-rotate.is-out .hs-rotate__word { opacity: 0; transform: translateY(-0.3em); }
.hs-rotate.is-enter .hs-rotate__word {
  animation: hs-word-in 420ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes hs-word-in {
  from { opacity: 0; transform: translateY(0.34em); }
  to   { opacity: 1; transform: none; }
}

/* The ruler. Out of flow, so it never affects the box it measures. */
.hs-rotate__ruler {
  position: absolute;
  left: 0; top: 0;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}

/* Visible to a screen reader, to nobody else. The typed copy is aria-hidden,
   so this is the version that gets announced — all at once, not letter by
   letter. */
.hs-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Chips ──────────────────────────────────────────────────────────────── */

.hs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--ch-radius-pill);
  font-size: 13px;
  background: var(--ch-primary-pale); color: var(--ch-primary-deep); white-space: nowrap;
}
.hs-chip--coin { background: #fff2e9; color: var(--ch-cta-deep); }
.hs-chip--mint { background: rgba(52, 211, 153, 0.16); color: #0f766e; }
.hs-chip--violet { background: rgba(156, 107, 255, 0.14); color: #6d3fd1; }
.hs-chip--cyan { background: rgba(34, 211, 238, 0.16); color: #0e7490; }

/* ══ BO — the flying companion ════════════════════════════════════════════ */

.hs-flyer {
  position: fixed;
  left: 0;
  /* Bottom edge, not a band at 74vh: at that height he crossed body copy in
     any section tall enough to reach it. Down here he sits in the runway the
     top-aligned cards leave below their content. */
  bottom: var(--bo-bottom, 44px);
  width: 78px;
  z-index: 35;
  pointer-events: none;
  display: none;
  will-change: transform;
  /* `bottom`, not `transform`: Motion drives the transform for the lane sweep
     and the two would overwrite each other. */
  transition: bottom 340ms cubic-bezier(.22, 1, .36, 1);
}
/* 1100, not 1280: a 1280px laptop loses ~15px to the scrollbar and fell
   under the gate, so Bo vanished on the most common screen there is. He
   no longer needs the wide-margin excuse either - the scroll loop ducks
   him below any copy that reaches his band. */
@media (min-width: 1100px) { .hs-flyer { display: block; } }

.hs-flyer__inner { animation: hs-hover 3.2s ease-in-out infinite; transform-origin: center; }
.hs-flyer img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(30, 36, 51, 0.28)); }

.hs-flyer__say {
  position: absolute; left: 50%; bottom: calc(100% - 4px);
  transform: translateX(-50%);
  background: #fff; border: 1px solid var(--ch-line);
  box-shadow: var(--ch-shadow-md); border-radius: var(--ch-radius-pill);
  padding: 7px 15px; font-size: 13px;
  font-family: var(--FontHeadingMd); font-weight: normal;
  color: var(--ch-primary-deep); white-space: nowrap;
  opacity: 0; transition: opacity 320ms ease;
}
.hs-flyer__say.is-shown { opacity: 1; }

@keyframes hs-hover {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-7px) rotate(3deg); }
}


/* ══ UPCOMING BANNER — slim strip above the hero ══════════════════════════ */

.hs-banner {
  background: linear-gradient(94deg, var(--ch-primary-deep) 0%, var(--ch-primary) 55%, #6d5fc4 100%);
  color: #fff;
}
.hs-banner__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px;
  padding: 10px var(--hs-gutter);
  font-size: 14px;
  text-align: center;
}
.hs-banner__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  font-family: var(--FontHeadingMd); font-weight: normal;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--ch-radius-pill); padding: 4px 11px;
}
.hs-banner__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ch-cta);
  animation: hs-blip 2.4s ease-in-out infinite;
}
@keyframes hs-blip { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.hs-banner__link {
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 1px;
}
.hs-banner__link:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 640px) { .hs-banner__when { display: none; } }

/* ══ OCTOBER PROGRAM ══════════════════════════════════════════════════════ */

.hs-october { padding-block: var(--hs-section-y); }

.hs-october__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ch-radius-lg);
  background: var(--ch-primary-pale);
  padding: clamp(30px, 4vw, 56px) clamp(24px, 3.5vw, 52px);
  isolation: isolate;
}
/* The photograph lives behind the dates panel only, so the copy column stays
   clean. Set as a CSS background, which fails silently if the file is absent —
   drop static/img/october-bg.jpg in and it appears. */
.hs-october__side {
  position: relative;
  overflow: hidden;
  border-radius: var(--ch-radius);
  isolation: isolate;
}
.hs-october__side::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--october-photo);
  background-size: cover;
  background-position: center 44%;
  z-index: -2;
}
/* Deep indigo wash: keeps the sunset legible as colour while giving the white
   numerals the contrast they need. */
.hs-october__side::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(148deg,
    rgba(29, 36, 71, 0.88) 0%,
    rgba(44, 53, 102, 0.76) 52%,
    rgba(44, 53, 102, 0.52) 100%);
  z-index: -1;
}

.hs-october__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}
@media (max-width: 860px) { .hs-october__grid { grid-template-columns: 1fr; } }
.hs-october__side { padding: clamp(24px, 2.6vw, 36px); color: #fff; }

.hs-october__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase;
  font-family: var(--FontHeadingMd); font-weight: normal;
  color: var(--ch-primary); margin-bottom: 14px;
}
.hs-october__copy { display: grid; gap: 16px; justify-items: start; }

.hs-october__dates {
  font-family: var(--FontHeadingLg); font-weight: normal;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1; letter-spacing: -0.03em;
  color: #fff; margin: 0;
  text-shadow: 0 2px 18px rgba(15, 20, 45, 0.45);
}
.hs-october__dates small {
  font-size: 0.34em; letter-spacing: -0.01em; margin-left: 0.16em;
}
.hs-october__where { margin: 12px 0 10px; font-size: 15px; color: rgba(255, 255, 255, 0.92); }
.hs-october__side .hs-small { color: rgba(255, 255, 255, 0.74); }


/* ══ SECTION STACK — each band lifts over the one before it ═══════════════
   Later siblings are positioned and paint above earlier ones, so a negative
   margin plus a rounded top edge makes the page read as stacked panels
   sliding over each other rather than as flat stripes. */
.hs-stack {
  border-radius: 30px 30px 0 0;
  margin-top: -30px;
}
/* The first card must not ride up over the hero: that is where the bok choy
   garden sits, and 30px is enough to clip it. */
.hs-hero + .hs-stack { margin-top: 0; }
.hs-panel > .hs-stack:first-child { margin-top: -30px; }
@media (max-width: 640px) { .hs-panel > .hs-stack:first-child { margin-top: -22px; } }
/* Load-bearing: this is what makes these six sections opaque, which the stack
   depends on. `.hs-trust` is deliberately absent — it is not a card. If it is
   ever given `hs-stack`, add it here first or the card beneath shows through. */
.hs-week, .hs-perma, .hs-oneloop, .hs-faq, .hs-october, .hs-pocket,
.hs-app { background: var(--ch-bg); }

@media (max-width: 640px) {
  .hs-stack { border-radius: 22px 22px 0 0; margin-top: -22px; }
}

/* ══ SECTION STACK ═══ delete this whole block to remove the effect ═══════
   The 13 `.hs-stack` sections are siblings of one block container (`.hs`), so
   each pins at the viewport top and the next — later in tree order, and opaque
   — slides up over it. No wrappers, no spacers, document height unchanged.

   `--hs-top` is written per section by initStack(): 0 for sections that fit the
   viewport, negative for taller ones, so a tall section only pins once its
   BOTTOM meets the viewport bottom. Without it, everything below the fold in
   .hs-participation (~1400px) would be unreachable.

   No z-index on purpose: sticky boxes create their own stacking contexts and
   positioned siblings paint in tree order, which IS the stack order. Keep the
   page under z-index 35 so Bo (.hs-flyer) stays on top.

   No will-change either: promoting 13 full-width cards costs ~60MB of layer
   memory and is exactly what stutters on low-end Android. */

/* (0,3,0) — beats `.hs section { position: relative }` at (0,1,1) on class
   count. A descendant selector, not a child one: half the cards now live one
   level down, inside a tab panel. */
.hs.is-stacked .hs-stack {
  position: sticky;
  top: var(--hs-top, 0px);

  /* Load-bearing for the timing, not the look. A card shorter than the screen
     pins the moment its top reaches the top — which is the same moment the
     next card is already a couple of hundred pixels into view, so it starts
     covering copy nobody has read. At a full viewport each card gets the
     screen to itself first, and only then is it slid over. Content is centred
     to itself first, and only then is it slid over.

     Content sits at the TOP of that space, not centred. Centring split the
     slack in two: half of it became a gap above every heading, and the other
     half was all the runway the next card had before it started covering copy.
     Top-aligned, the gap above is just the section's own padding and the whole
     of the slack becomes overlap runway. */
  min-height: 100vh;
  display: grid;
  align-content: start;
}
@supports (min-height: 100svh) {
  .hs.is-stacked .hs-stack { min-height: 100svh; }
}

/* The one exception. Logos are glanced at, not read, so the trust strip does
   not need a screen of its own — and centring 400px of content in a 900px
   card is exactly where the gap above "Trusted by" was coming from. It still
   pins and still carries the rounded top edge; it is just its own height. */
.hs.is-stacked .hs-trust.hs-stack { min-height: 0; }

/* Painting order. Flat siblings sort themselves by tree order, but the tab
   panels are a wrapper, and a wrapper's whole subtree paints as one layer —
   without these the pinned trust strip would sit on top of every card inside
   it. Six numbers, ascending down the page, all far below Bo at 35. */
.hs > .hs-hero   { z-index: 0; }
.hs > .hs-trust  { z-index: 1; }
.hs > .hs-tabs   { position: relative; z-index: 2; }
.hs > .hs-panels { position: relative; z-index: 3; }
.hs > .hs-faq    { z-index: 4; }
.hs > .hs-cta    { z-index: 5; }

/* Sticky makes each card its own stacking context, so `.hs-wrap { z-index: 1 }`
   stays scoped to its card. `.hs-hero` and `.hs-trust` are NOT cards and would
   otherwise paint their content above every card. Visual no-op today. */
.hs.is-stacked > section { isolation: isolate; }

/* Backstop: a stale `is-stacked` class must never strand a tall section. */
@media (prefers-reduced-motion: reduce) {
  .hs.is-stacked .hs-stack { position: relative; top: auto; }
}
/* ══ END SECTION STACK ═══════════════════════════════════════════════════ */

/* ══ 01 · HERO — live device ══════════════════════════════════════════════ */

.hs-hero {
  position: relative;
  overflow: hidden;
  /* Enough bottom room for the grass and the bok choy to stand in, and no
     more: past about 130px it stops reading as a scene and starts reading as
     a gap before the logos. */
  padding-block: clamp(48px, 5vw, 78px) clamp(132px, 12vw, 188px);
  background: #eef1fd;
}

/* One centred column. The garden is the only picture the hero needs, so the
   copy gets the full width and the field below it stays clear. */
.hs-hero__grid { display: block; }

.hs-hero__copy {
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.hs-hero__sub { max-width: 54ch; }
.hs-hero .ch-btn-row { justify-content: center; }
/* Smaller than a body chip, and lifted clear of the bok choy row that
   sits along the bottom of the garden. */
.hs-hero__meta { margin-top: 0; }
.hs-hero__meta.ch-chips {
  gap: 0.5rem 1.5rem;
  justify-content: center;
  font-size: 13.5px;
}

/* Nothing sits to the right of the type now, so the headline can run wider
   before it wraps. Wide enough to hold "Automate your employee" on one line:
   the word below it is the one that changes, and it needs the line to itself. */
.hs-hero .hs-display { max-width: 20ch; margin-inline: auto; }
@media (max-width: 720px) { .hs-hero .hs-display { max-width: none; } }

/* The cycling word always starts its own line. Left inline it would sit up
   beside "employee" whenever the word is a short one, and the headline would
   reflow from two lines to three and back every few seconds. */
.hs-display__swap { display: block; }

/* ── The hero garden scene ──────────────────────────────────────────────
   A full-bleed vector landscape behind the hero: gradient sky, drifting
   clouds, layered hills, a field, and a row of bok choy along the bottom
   with Bo standing in it. Every colour is a pastel drawn from the brand
   palette so dark headline text stays readable over it. Content sits above
   on .hs-wrap's z-index:1. */
.hs-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.72;
}
.hs-scene svg { width: 100%; height: 100%; display: block; }

/* Layers drift at their own pace — that difference is the depth. */
.hs-cloud { animation: hs-cloud-a 42s ease-in-out infinite; }
.hs-cloud--b { animation: hs-cloud-b 56s ease-in-out infinite; }
.hs-cloud--c { animation: hs-cloud-c 34s ease-in-out infinite; }

@keyframes hs-cloud-a { 0%, 100% { transform: translateX(-26px); } 50% { transform: translateX(30px); } }
@keyframes hs-cloud-b { 0%, 100% { transform: translateX(22px); } 50% { transform: translateX(-28px); } }
@keyframes hs-cloud-c { 0%, 100% { transform: translateX(-16px); } 50% { transform: translateX(20px); } }

.hs-garden {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(96px, 15vw, 156px);
  pointer-events: none;
}
.hs-sprout {
  position: absolute;
  left: var(--x);
  bottom: var(--b, 3%);
  width: var(--w);
  height: auto;
  transform-origin: 50% 100%;
  animation: hs-sway 7s ease-in-out infinite;
}
.hs-sprout:nth-of-type(2) { animation-delay: -1.1s; animation-duration: 6.2s; }
.hs-sprout:nth-of-type(3) { animation-delay: -2.4s; animation-duration: 7.8s; }
.hs-sprout:nth-of-type(4) { animation-delay: -0.6s; animation-duration: 6.8s; }
.hs-sprout:nth-of-type(5) { animation-delay: -3.2s; animation-duration: 7.2s; }
.hs-sprout:nth-of-type(6) { animation-delay: -1.8s; animation-duration: 6.5s; }
.hs-sprout:nth-of-type(7) { animation-delay: -2.9s; animation-duration: 7.6s; }
.hs-sprout:nth-of-type(8) { animation-delay: -0.3s; animation-duration: 6.9s; }
.hs-sprout:nth-of-type(9) { animation-delay: -1.4s; animation-duration: 7.4s; }
.hs-sprout:nth-of-type(10) { animation-delay: -2.1s; animation-duration: 6.6s; }
@media (max-width: 720px) {
  .hs-sprout:nth-of-type(even) { display: none; }
}

@keyframes hs-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* The stage the hero illustration sits on */
/* The stage the hero illustration sits on */
.hs-stage {
  position: relative;
  perspective: 1200px;
  display: grid;
  place-items: center;
}
.hs-stage__glow {
  position: absolute; inset: 4% 2%; border-radius: 50%;
  filter: blur(48px); pointer-events: none;
  background:
    radial-gradient(60% 60% at 42% 34%, rgba(82, 98, 175, 0.2), transparent 70%),
    radial-gradient(58% 58% at 70% 72%, rgba(249, 133, 96, 0.2), transparent 70%);
  animation: hs-breathe 9s ease-in-out infinite;
}
@keyframes hs-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}

/* The plate is a flat illustration, so the tilt stays gentle — past about 5deg
   it advertises that everything in it rotates together. */
.hs-plate {
  position: relative;
  width: 100%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
}
.hs-plate img { width: 100%; height: auto; display: block; }

/* Notification cards drift at a larger amplitude than the plate — that
   difference is what reads as depth against a single flat layer. */
.hs-float {
  position: absolute;
  background: #fff;
  border: 1px solid var(--ch-line);
  border-radius: 14px;
  box-shadow: var(--ch-shadow-md);
  padding: 10px 14px;
  font-size: 13.5px;
  display: grid; gap: 2px;
  max-width: 210px;
  animation: hs-drift 6.5s ease-in-out infinite;
  z-index: 2;
}
.hs-float small { font-size: 12px; color: var(--ch-muted); }
.hs-float b { font-family: var(--FontHeadingMd); font-weight: normal; color: var(--ch-cta-deep); }
.hs-float--mood { top: 12%; left: -5%; }
.hs-float--streak { bottom: 14%; right: -4%; animation-delay: -2.6s; }
@keyframes hs-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1080px) { .hs-float { display: none; } }

/* ══ 02 · TRUSTED BY ══════════════════════════════════════════════════════ */

.hs-trust {
  padding-block: clamp(56px, 6vw, 88px) clamp(44px, 4.6vw, 68px);
  border-top: 1px solid var(--ch-line);
  background: var(--ch-bg);   /* opaque: it is a stack card now */
}
/* Matches the live site's trust strip: the same heading treatment as
   `.trusted__title h3` (style.css:855) and the same full-colour logos laid out
   six to a row, as `col-md-2 col-6` does on home_page_v2.html. Deliberately no
   greyscale — getchoys.com shows these in colour. */
.hs-trust__label {
  text-align: center;
  margin-bottom: clamp(26px, 3vw, 40px);
  font-family: var(--FontHeadingMd);
  font-weight: normal;
  font-size: clamp(22px, 2.4vw, var(--chHeading));
  line-height: 120%;
  color: var(--navTextColor);
}
.hs-trust__logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 40px) clamp(16px, 2vw, 28px);
  align-items: center;
  justify-items: center;
}
@media (max-width: 900px) { .hs-trust__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hs-trust__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Height per logo, not one cap for all. A square mark and a long wordmark set
   to the same height do not read as the same size - the square one looks tiny,
   because the eye compares area. Each --h is computed so width x height stays
   roughly constant across the row; the files themselves are trimmed of their
   transparent margins first, or the padding would skew every measurement. */
.hs-trust__logos img {
  height: var(--h, 32px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.hs-trust__certs {
  margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ch-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px;
}
.hs-trust__certs img { height: 36px; width: auto; }

/* ══ 03 · PARTICIPATION ═══════════════════════════════════════════════════ */

.hs-participation { padding-block: var(--hs-section-y); background: var(--ch-surface); }

.hs-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .hs-pillars { grid-template-columns: 1fr; } }

.hs-pillar {
  position: relative;
  background: #fff;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  padding: 0 0 24px;
  overflow: hidden;
  display: grid;
  align-content: start;
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.hs-pillar:hover { transform: translateY(-5px); box-shadow: var(--ch-shadow-md); }

.hs-pillar__figure {
  position: relative; height: 292px;
  display: grid; place-items: start center; overflow: hidden; padding-top: 22px;
}
/* Width-driven so tall phone screenshots fill the card and crop at the bottom,
   rather than shrinking to a sliver to fit their height. */
.hs-pillar__figure img {
  width: min(78%, 326px); height: auto;
  max-width: none; max-height: none; display: block;
  border-radius: 14px 14px 0 0;
}
.hs-pillar--fit .hs-pillar__figure { background: linear-gradient(160deg, rgba(52, 211, 153, 0.17), rgba(52, 211, 153, 0.03)); }
.hs-pillar--engage .hs-pillar__figure { background: linear-gradient(160deg, rgba(156, 107, 255, 0.17), rgba(156, 107, 255, 0.03)); }
.hs-pillar--rewards .hs-pillar__figure { background: linear-gradient(160deg, rgba(249, 133, 96, 0.19), rgba(249, 133, 96, 0.03)); }
.hs-pillar--benefits .hs-pillar__figure { background: linear-gradient(160deg, rgba(34, 211, 238, 0.17), rgba(34, 211, 238, 0.03)); }

.hs-pillar__body { padding: 20px 26px 0; display: grid; gap: 9px; }
.hs-pillar__body h3 { font-family: var(--FontHeadingMd); font-weight: normal; }
.hs-pillar__eyebrow {
  display: flex; align-items: center; gap: 9px; font-size: 13px;
  font-family: var(--FontHeadingMd); font-weight: normal;
}
.hs-pillar--fit .hs-pillar__eyebrow { color: #0f766e; }
.hs-pillar--engage .hs-pillar__eyebrow { color: #6d3fd1; }
.hs-pillar--rewards .hs-pillar__eyebrow { color: var(--ch-cta-deep); }
.hs-pillar--benefits .hs-pillar__eyebrow { color: #0e7490; }
.hs-pillar__eyebrow span { font-family: var(--fontFamily); color: var(--ch-muted); }
.hs-pillar__facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }

/* ══ TOGETHER / ON THEIR PHONE — two-column media splits ══════════════════ */

.hs-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .hs-split { grid-template-columns: 1fr; } }
.hs-split--reverse .hs-split__media { order: -1; }
@media (max-width: 900px) { .hs-split--reverse .hs-split__media { order: 0; } }

.hs-split__copy { display: grid; gap: 16px; justify-items: start; }
.hs-split__media img { width: 100%; height: auto; display: block; }

.hs-eyebrow {
  font-size: 13px;
  font-family: var(--FontHeadingMd); font-weight: normal;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ch-primary);
}

.hs-together { padding-block: var(--hs-section-y); background: var(--ch-surface); }
.hs-pocket { padding-block: var(--hs-section-y); }

.hs-stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.hs-stores img { height: 44px; width: auto; display: block; }


/* ══ WITH / WITHOUT CHOYS ═══════════════════════════════════
   One panel, not two floating cards. The gap between the cards was reading as
   a gutter of dead space, and nothing lined up across it - the whole point of
   a comparison is that the eye runs sideways.

   Source order is grouped by column (a heading then its four points, twice) so
   the panel stacks into two readable blocks on a phone. `grid-auto-flow:
   column` over five explicit rows turns that same order into two aligned
   columns on a wide screen, and because both columns share the row tracks,
   every pair sits on one line however long the copy runs. */

.hs-compare { padding-block: var(--hs-section-y); background: var(--ch-surface); }
.hs-compare .hs-section-head { margin-bottom: clamp(24px, 2.8vw, 34px); }

.hs-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, minmax(0, auto));
  grid-auto-flow: column;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ch-shadow-sm);
}

.hs-vs__head { padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px) clamp(15px, 1.7vw, 21px); }
.hs-vs__head--with { background: linear-gradient(180deg, var(--ch-primary-pale), rgba(255, 255, 255, 0)); }

.hs-vs__label {
  margin: 0 0 10px;
  font-family: var(--FontHeadingMd); font-weight: normal;
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ch-muted);
}
.hs-vs__head--with .hs-vs__label { color: var(--ch-primary); }

/* Big enough to land, small enough not to shout over the heading above it. */
.hs-vs__figure {
  margin: 0;
  font-family: var(--FontHeadingLg); font-weight: normal;
  font-size: clamp(24px, 2.3vw, 30px); line-height: 1.1; letter-spacing: -0.022em;
  color: var(--ch-muted);
}
.hs-vs__head--with .hs-vs__figure { color: var(--ch-primary); }
.hs-vs__sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ch-muted); }

.hs-vs__cell {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  padding: clamp(13px, 1.4vw, 17px) clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--ch-line);
  font-size: 15px; line-height: 1.5;
  color: var(--ch-body);
}
.hs-vs__cell--with { background: rgba(82, 98, 175, 0.04); }
.hs-vs__mark { font-size: 12px; line-height: 1.6; }
.hs-vs__cell--without .hs-vs__mark { color: #b9414a; }
.hs-vs__cell--with .hs-vs__mark { color: #0f766e; }

/* The seam between the two sides. */
.hs-vs__head--with, .hs-vs__cell--with { border-left: 1px solid var(--ch-line); }

@media (max-width: 760px) {
  .hs-vs {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .hs-vs__head--with, .hs-vs__cell--with { border-left: 0; }
  .hs-vs__head--with { border-top: 1px solid var(--ch-line-strong); }
}

/* ══ 04 · MEET BO ═════════════════════════════════════════════════════════ */

.hs-bo { padding-block: var(--hs-section-y); background: linear-gradient(180deg, var(--ch-surface-warm) 0%, #fff 100%); }
.hs-bo__grid {
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
@media (max-width: 860px) { .hs-bo__grid { grid-template-columns: 1fr; } }
.hs-bo__art { display: grid; place-items: center; }
.hs-bo__art img { width: min(270px, 78%); height: auto; filter: drop-shadow(0 20px 30px rgba(30, 36, 51, 0.2)); }
.hs-bo__copy { display: grid; gap: 16px; justify-items: start; }

.hs-duties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 6px; width: 100%; }
@media (max-width: 720px) { .hs-duties { grid-template-columns: 1fr; } }
.hs-duty {
  background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius);
  padding: 18px 18px 16px; display: grid; gap: 7px; align-content: start;
}
.hs-duty__icon { width: 34px; height: 34px; }
.hs-duty h3 { font-size: 15px; margin: 0; font-family: var(--FontHeadingMd); font-weight: normal; }
.hs-duty p { font-size: 14px; line-height: 1.55; color: var(--ch-body); margin: 0; }

/* ══ 05 · A WEEK ══════════════════════════════════════════════════════════ */

.hs-week { padding-block: var(--hs-section-y); }
.hs-week__days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid var(--ch-primary-pale); }
@media (max-width: 1080px) { .hs-week__days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 660px) { .hs-week__days { grid-template-columns: 1fr; } }

.hs-day {
  padding: 24px 20px 26px; border-right: 1px solid var(--ch-line); border-bottom: 1px solid var(--ch-line);
  display: grid; gap: 8px; align-content: start; position: relative;
}
.hs-day:last-child { border-right: 0; }
@media (max-width: 1080px) { .hs-day:nth-child(3n) { border-right: 0; } }
@media (max-width: 660px) { .hs-day { border-right: 0; } }
.hs-day__emoji { font-size: 22px; line-height: 1; }
.hs-day__when { font-size: 12.5px; color: var(--ch-primary); font-family: var(--FontHeadingMd); font-weight: normal; }
.hs-day__text { font-size: 14.5px; line-height: 1.58; color: var(--ch-body); margin: 0; }
.hs-day__mark {
  position: absolute; top: -6px; left: 20px; width: 10px; height: 10px;
  border-radius: 50%; background: #fff; border: 2px solid var(--ch-primary);
}
.hs-day--payoff { background: var(--ch-surface-warm); }
.hs-day--payoff .hs-day__mark { border-color: var(--ch-cta); }
.hs-week__note {
  margin-top: 24px; font-size: clamp(18px, 2vw, 22px);
  font-family: var(--FontHeadingMd); font-weight: normal;
  letter-spacing: -0.015em; color: var(--ch-title);
}

/* ══ 06 · WHAT HR DOES ════════════════════════════════════════════════════ */

.hs-hr {
  padding-block: var(--hs-section-y);
  background: var(--ch-primary-deep);   /* the design system's dark band */
  color: var(--ch-on-dark);
}
.hs-hr .hs-h2 { color: #fff; }
.hs-hr .hs-lead { color: var(--ch-on-dark-muted); }
.hs-hr .hs-badge { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: none; }

.hs-hr__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 30px; }
.hs-hr__flow span {
  padding: 9px 16px; border-radius: var(--ch-radius-pill);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 14px; color: #fff;
}
.hs-hr__flow i { color: rgba(255, 255, 255, 0.45); font-style: normal; }

.hs-hr__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 52px); align-items: start;
}
@media (max-width: 940px) { .hs-hr__grid { grid-template-columns: 1fr; } }

.hs-builder {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ch-radius-lg);
  padding: 20px;
}
.hs-builder__bar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px; color: var(--ch-on-dark-muted);
}
.hs-builder__spark {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ch-primary-light), var(--hs-purple) 55%, var(--hs-magenta));
  color: #fff; font-size: 12px;
}
.hs-builder__prompt {
  background: rgba(0, 0, 0, 0.24); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px; padding: 14px 16px; font-size: 15px; color: #fff; min-height: 52px;
}
.hs-builder__caret {
  display: inline-block; width: 2px; height: 1.05em; background: var(--ch-cta);
  vertical-align: text-bottom; margin-left: 2px; animation: hs-blink 1.05s steps(1) infinite;
}
@keyframes hs-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hs-builder__status {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 13px; color: var(--ch-on-dark-muted); min-height: 20px;
}
.hs-builder__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ch-cta);
  animation: hs-pulse 1.3s ease-in-out infinite;
}
@keyframes hs-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }

.hs-builder__draft { margin-top: 14px; display: grid; gap: 8px; }
.hs.is-js .hs-builder__draft { opacity: 0; transform: translateY(10px); transition: opacity 520ms ease, transform 520ms ease; }
.hs.is-js .hs-builder__draft.is-in { opacity: 1; transform: none; }

.hs-draftrow {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 14px; color: #fff;
}
.hs-draftrow span:nth-child(2) { flex: 1; min-width: 0; }
.hs-draftrow small { color: var(--ch-on-dark-muted); font-size: 12.5px; white-space: nowrap; }
.hs-draftrow__tick {
  width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(52, 211, 153, 0.22); color: var(--hs-emerald); font-size: 11px;
}

/* Buttons INSIDE the AI-builder mockup. Not page CTAs — deliberately not
   .ch-btn, because they are part of a rendered UI screenshot. */
.hs-builder__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hs-mockbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border-radius: var(--ch-radius-pill);
  font-size: 14px; font-family: var(--fontFamily);
  border: 1.5px solid transparent; cursor: pointer;
}
.hs-mockbtn--primary { background: var(--ch-cta); color: #fff; }
.hs-mockbtn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.42); }

.hs-hrlist { display: grid; gap: 0; }
.hs-hrlist > div {
  padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start;
}
.hs-hrlist > div:first-child { padding-top: 0; }
.hs-hrlist__icon {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1);
}
.hs-hrlist h3 { font-size: 16px; margin: 0 0 4px; color: #fff; font-family: var(--FontHeadingMd); font-weight: normal; }
.hs-hrlist p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ch-on-dark-muted); max-width: 46ch; }

/* .ch-arrow is indigo by default; on this dark band it needs the brand orange
   at full strength, which is also what the client asked for. */
.hs-hr .ch-arrow { margin-top: 22px; color: var(--ch-cta); }
.hs-hr .ch-arrow:hover { color: var(--ch-cta-hover); }

/* ══ 07 · PERMA ═══════════════════════════════════════════════════════════ */

.hs-perma { padding-block: var(--hs-section-y); }
.hs-perma__dims { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
@media (max-width: 1000px) { .hs-perma__dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hs-perma__dims { grid-template-columns: 1fr; } }

.hs-dim {
  padding: 22px 18px 20px; border-radius: var(--ch-radius);
  background: #fff; border: 1px solid var(--ch-line);
  display: grid; gap: 7px; align-content: start;
  border-top: 3px solid var(--ch-primary);
}
.hs-dim:nth-child(2) { border-top-color: var(--hs-purple); }
.hs-dim:nth-child(3) { border-top-color: var(--hs-magenta); }
.hs-dim:nth-child(4) { border-top-color: var(--hs-cyan); }
.hs-dim:nth-child(5) { border-top-color: var(--ch-cta); }
.hs-dim__letter {
  font-size: 26px; line-height: 1; color: var(--ch-primary);
  font-family: var(--FontHeadingXl); font-weight: normal;
}
.hs-dim:nth-child(2) .hs-dim__letter { color: var(--hs-purple); }
.hs-dim:nth-child(3) .hs-dim__letter { color: var(--hs-magenta); }
.hs-dim:nth-child(4) .hs-dim__letter { color: var(--hs-cyan); }
.hs-dim:nth-child(5) .hs-dim__letter { color: var(--ch-cta); }
.hs-dim h3 { font-size: 15px; margin: 0; font-family: var(--FontHeadingMd); font-weight: normal; }
.hs-dim p { font-size: 13.5px; line-height: 1.52; color: var(--ch-body); margin: 0; }

.hs-perma__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); }
@media (max-width: 900px) { .hs-perma__split { grid-template-columns: 1fr; } }

.hs-steps { display: grid; gap: 0; counter-reset: hsstep; }
.hs-steps > div {
  counter-increment: hsstep; display: grid; grid-template-columns: 30px 1fr; gap: 15px;
  padding: 18px 0; border-bottom: 1px solid var(--ch-line);
}
.hs-steps > div:first-child { padding-top: 0; }
.hs-steps > div::before {
  content: counter(hsstep);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ch-primary-pale); color: var(--ch-primary-deep); font-size: 13px;
  font-family: var(--FontHeadingMd); font-weight: normal;
}
.hs-steps h3 { font-size: 15.5px; margin: 0 0 3px; font-family: var(--FontHeadingMd); font-weight: normal; }
.hs-steps p { font-size: 14px; line-height: 1.56; color: var(--ch-body); margin: 0; }

.hs-why {
  background: var(--ch-surface); border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg); padding: 28px 26px; align-self: start;
  display: grid; gap: 12px;
}
.hs-why h3 { font-size: 19px; margin: 0; font-family: var(--FontHeadingLg); font-weight: normal; }
.hs-dials { display: grid; gap: 9px; margin-top: 2px; }
.hs-dial {
  display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--ch-body);
  padding: 12px 14px; background: #fff; border: 1px solid var(--ch-line); border-radius: 12px;
}
.hs-dial b { color: var(--ch-title); font-family: var(--FontHeadingMd); font-weight: normal; }
.hs-dial__arrow { color: var(--ch-cta); flex: none; }

.hs-perma__cta { margin-top: clamp(28px, 3vw, 40px); display: flex; justify-content: center; }

/* ══ 08 · CLIENTS ═══════════════════════════════════════════
   The live site's "What clients are saying about us" block, rebuilt on this
   page's tokens: two cards at 24px radius with a soft shadow, a 56px avatar
   beside the role and name, and the quote mark hung off the first card's top
   left corner. Proportions follow style.css `.hear__from__*` (line 1230-ish).

   Two departures, both deliberate. The mark is inset rather than the live
   -48px/-50px, which would clip against this page's container. And the cards
   are one grid each, so the quote takes the slack and "Read Case Study" sits
   on the same baseline in both however different the quote lengths are. */

.hs-clients { padding-block: var(--hs-section-y); background: var(--ch-surface); }
.hs-section-head--center { justify-items: center; text-align: center; }
.hs-section-head--center .hs-h2 { max-width: 22ch; }

.hs-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  align-items: stretch;
  padding-top: 26px;                  /* room for the quote mark to hang into */
}
@media (max-width: 860px) { .hs-quotes { grid-template-columns: 1fr; } }

.hs-quote {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* by-line, quote, CTA pinned to the foot */
  gap: 18px;
  padding: clamp(26px, 2.6vw, 32px) clamp(22px, 2.3vw, 28px);
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--ch-line);
  box-shadow: 4px 4px 48px 0 rgba(82, 98, 175, 0.13);
}

.hs-quote__mark {
  position: absolute;
  top: -26px; left: -18px;
  width: 66px; height: auto;
  opacity: 0.85;
  pointer-events: none;
}
@media (max-width: 620px) { .hs-quote__mark { top: -20px; left: -8px; width: 52px; } }

.hs-quote__by { display: flex; align-items: center; gap: 12px; }
.hs-quote__avatar {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ch-surface);
}

/* The role reads larger than the name, as it does on the live site. */
.hs-quote__role {
  margin: 0 0 2px;
  font-family: var(--FontHeadingMd); font-weight: normal;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.35;
  color: var(--ch-title);
}
.hs-quote__name {
  margin: 0;
  font-family: var(--FontHeadingMd); font-weight: normal;
  font-size: 12px; line-height: 1.2;
  color: var(--ch-muted);
}

.hs-quote blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ch-body);
}

.hs-quote__cta { align-self: start; font-size: 15px; }

/* ══ 09 · ONE LOOP ════════════════════════════════════════════════════════ */

.hs-oneloop { padding-block: var(--hs-section-y); }
.hs-cycle {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  padding: 32px clamp(18px, 3vw, 32px);
  background: var(--ch-surface); border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg); margin-bottom: 24px;
}
.hs-cycle__node {
  padding: 12px 22px; border-radius: var(--ch-radius-pill);
  background: #fff; border: 1px solid var(--ch-line-strong);
  font-size: 15px; color: var(--ch-primary-deep);
  font-family: var(--FontHeadingMd); font-weight: normal;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.hs-cycle__node.is-lit { background: var(--ch-primary); border-color: var(--ch-primary); color: #fff; transform: translateY(-3px); }
.hs-cycle__arrow { color: var(--ch-line-strong); }
.hs-cycle__loopback { width: 100%; text-align: center; font-size: 13.5px; color: var(--ch-muted); margin-top: 4px; }

.hs-diffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .hs-diffs { grid-template-columns: 1fr; } }
.hs-diff {
  display: grid; gap: 8px; padding: 24px 24px 22px;
  border-radius: var(--ch-radius); background: #fff; border: 1px solid var(--ch-line);
  border-left: 4px solid var(--ch-primary);
}
.hs-diff:last-child { border-left-color: var(--ch-cta); }

/* ══ 10 · BENEFITS ════════════════════════════════════════════════════════ */

.hs-benefits { padding-block: var(--hs-section-y); background: var(--ch-surface-warm); }
.hs-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 880px) { .hs-benefits__grid { grid-template-columns: 1fr; } }
.hs-benefit {
  background: #fff; border: 1px solid var(--ch-line); border-radius: var(--ch-radius);
  padding: 26px 24px; display: grid; gap: 10px; align-content: start;
}
.hs-benefit__icon { width: 40px; height: 40px; }
.hs-benefit h3 { font-size: 16.5px; margin: 0; font-family: var(--FontHeadingMd); font-weight: normal; }
.hs-benefit p { font-size: 14.5px; line-height: 1.58; color: var(--ch-body); margin: 0; }

/* ══ 11 · QUESTIONS — the site accordion, styled by style.css ═════════════ */

.hs-faq { padding-block: var(--hs-section-y); }
/* .frequently sets its own 96px/56px margins; inside our section that doubles
   up, so neutralise them and let --hs-section-y own the rhythm. */
.hs-faq .frequently { margin-top: 0; margin-bottom: 0; }

/* ══ 12 · FINAL CTA — coral wash, as on the live homepage ═════════════════ */

.hs-cta { padding-block: var(--hs-section-y); background: var(--ch-surface-alt); }
.hs-cta__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
@media (max-width: 940px) { .hs-cta__grid { grid-template-columns: 1fr; } }
.hs-cta__copy { display: grid; gap: 22px; justify-items: start; }
.hs-cta__bo { width: 132px; filter: drop-shadow(0 16px 24px rgba(30, 36, 51, 0.22)); }

.hs-form {
  background: #fff; border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg); padding: 26px 24px;
  display: grid; gap: 13px; box-shadow: var(--ch-shadow-sm);
}
.hs-form__row { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .hs-form__row { grid-template-columns: 1fr; } }
.hs-field { display: grid; gap: 6px; }
.hs-field label { font-size: 12.5px; color: var(--ch-muted); }
.hs-field input, .hs-field select {
  width: 100%; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--ch-line-strong); background: #fff;
  color: var(--ch-title); font-size: 15px; font-family: var(--fontFamily);
}
.hs-field input::placeholder { color: var(--ch-faint); }
.hs-field input:focus, .hs-field select:focus { outline: 2px solid var(--ch-cta); outline-offset: 1px; border-color: transparent; }
.hs-form__legal { font-size: 12px; color: var(--ch-muted); margin: 0; }
.hs-form .ch-btn { width: 100%; }
.hs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }


/* ══ FOR HR / FOR EMPLOYEES ═══════════════════════════════════
   The page splits in two here. The bar is a plain segmented control, centred,
   and the cards of whichever track is open ride up over it. */

.hs-tabs {
  padding-block: var(--hs-section-y) calc(var(--hs-section-y) * 0.55 + 30px);
  background: var(--ch-surface);
  text-align: center;
}
.hs-tabs__head { display: grid; gap: 14px; margin-bottom: 32px; }
.hs-tabs__head .hs-h2 { max-width: 20ch; margin-inline: auto; }
.hs-tabs__head .hs-lead { max-width: 62ch; margin-inline: auto; }

.hs-tabs__bar {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--ch-radius-pill);
  background: #fff;
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-shadow-sm);
}
.hs-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 12px 30px;
  border-radius: var(--ch-radius-pill);
  background: transparent;
  font-family: var(--FontHeadingMd); font-weight: normal;
  font-size: 15px;
  color: var(--ch-muted);
  transition: background 220ms ease, color 220ms ease;
}
.hs-tab:hover { color: var(--ch-primary); }
.hs-tab.is-active { background: var(--ch-primary); color: #fff; }
.hs-tab:focus-visible { outline: 2px solid var(--ch-primary); outline-offset: 3px; }
@media (max-width: 480px) {
  .hs-tabs__bar { display: flex; }
  .hs-tab { flex: 1; padding-inline: 12px; font-size: 14px; }
}

/* Opacity only. A transform here would become the containing block for every
   sticky card inside the panel and the whole stack would stop pinning. */
.hs-panel.is-enter { animation: hs-panel-in 340ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hs-panel-in { from { opacity: 0; } to { opacity: 1; } }


/* ══ THE PORTAL RECORDING ═══════════════════════════════════
   A browser-chrome frame around dashboard.mp4, sized by aspect-ratio so the
   band does not jump when the file finally loads. */

.hs-vid { margin: 0 0 clamp(30px, 3.4vw, 46px); }
.hs-vid__frame {
  border-radius: var(--ch-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 70px rgba(8, 12, 30, 0.45);
}
.hs-vid__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.hs-vid__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.26); }
.hs-vid__bar em {
  margin-left: 10px; font-style: normal; font-size: 12.5px;
  color: var(--ch-on-dark-muted);
}
.hs-vid video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1896 / 900;
  background: #10163a;
}
.hs-vid figcaption { margin-top: 14px; }
.hs-hr .hs-small { color: var(--ch-on-dark-muted); }

/* The recording holds the left column; the three points read down the right,
   which is the same shape the rest of the page uses for a media split. The
   left column is the wider one: this is a 1896px-wide UI being shrunk, so
   every pixel it keeps is legibility. */
.hs-hr__grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
  align-items: center;
}
@media (max-width: 940px) { .hs-hr__grid { grid-template-columns: 1fr; } }
.hs-vid { margin-bottom: 0; }

/* ══ THE EMPLOYEE APP ═══════════════════════════════════════ */

.hs-app { padding-block: var(--hs-section-y); }
/* One line each. The picture beside them is doing the explaining. */
.hs-applist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; }
.hs-applist li {
  padding-left: 26px;
  position: relative;
  font-family: var(--FontHeadingMd); font-weight: normal;
  font-size: 16px;
  color: var(--ch-title);
}
.hs-applist li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ch-primary-pale);
  box-shadow: inset 0 0 0 2px var(--ch-primary);
}

/* ══ Reveal ═══════════════════════════════════════════════════════════════ */

.hs.is-js .hs-reveal { opacity: 0; transform: translateY(26px) scale(0.985); }
.hs.is-js .hs-reveal.is-in {
  opacity: 1; transform: none;
  transition:
    opacity 700ms cubic-bezier(.22, 1, .36, 1),
    transform 780ms cubic-bezier(.22, 1, .36, 1);
}

/* 2 · Scroll parallax. Media drifts against the page as it passes through the
   viewport; the amount is set per element by JS via --pY. Small on purpose —
   enough to feel alive, not enough to notice as an effect. */
.hs-parallax {
  will-change: transform;
  transition: none !important;
}

/* ══ Reduced motion ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .hs *, .hs *::before, .hs *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hs-flyer { display: none; }
  .hs-cloud, .hs-sprout { animation: none !important; }
  .hs-plate { transform: none !important; }
}