@charset "UTF-8";
/* ============================================================
   ManagerAlly landing page — structural stylesheet
   This is a SCAFFOLD: layout, spacing and behaviour hooks are
   real; decorative styling is intentionally minimal so the
   design team's mock drives the final look.
   Organised top-to-bottom in page order.
   ============================================================ */
/* ---------- Base ------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: url("../assets/bg-white.png");
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  line-height: 1.15;
  font-weight: 800;
}

.grad-text {
  background: var(--grad-accent);
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  background: linear-gradient(90deg, #122e9e, #0F9F95, #4F6FEA, #122e9e, #645197, #20635e);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* font-style: italic; */
  display: block;
  /* animation: gradientMove 6s linear infinite; */
  /* animation: 
     gradientMove 4s linear infinite,
     textPulse 5s ease-in-out infinite;
  */
  transition: transform 0.5s ease;
  animation: gradientMove 6s linear infinite;
  transform: scale(1);
}

.grad-text.animate {
  animation: gradientMove 6s linear infinite, textPulse 2s ease-in-out;
}

.section__label.animate {
  animation: gradientMove 6s linear infinite, textPulseBig 2s ease-in-out;
}

/* Shared section scaffolding */
.section {
  padding: 96px 0 40px 0;
  background-image: url("../assets/bg-white.png");
}

.section__header {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 60px;
}

.section__label {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: 10px;
  background: var(--grad-accent);
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  background: linear-gradient(90deg, #122e9e, #0F9F95, #4F6FEA, #122e9e, #645197, #20635e);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}

.section__grad-text {
  font-size: 2.6rem;
  /* font-family: "merriweather", serif; */
  font-family: "fira-sans", sans-serif;
  line-height: 1.4;
  margin-bottom: 2rem;
}
.section__grad-text em {
  font-size: 2.6rem;
  display: block;
  font-style: italic;
}

.section__label--onDark {
  color: rgba(255, 255, 255, 0.75);
}

.section__sub {
  color: var(--muted);
  margin-top: 20px;
  font-size: 19px;
  font-weight: 400;

  color: #757575;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    margin-bottom: 2rem;
    text-align: center;
    /* font-family: 'fira-sans', sans-serif; */
    font-family: "noto-sans-semicondensed", sans-serif;

    /* font-weight: 300; */
    /* font-size: 1.1rem; */
    /* font-family: 'fira-sans', sans-serif; */
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
}

.btn--primary {
  /* background: var(--brand); */
  color: #fff;
  background-color: #4150ee;
  /* background: #176B68;
  background: #B8D2C6;
  background: #F8F7F3;
  background: #252B2B;
  background: #E9826E;
  background: #183153;
  background: #7196B5;
  background: #E9F0F4;
  background: #FAFAF7;
  background: #D5A447;
  background: #315C4C;
  background: #A9C1AE; */
  /* background: #E8DED0;
  background: #FBF8F2; 
  background: #292929; */
  /* background: linear-gradient(180deg, #7B16E8 0%, #E83E8C 100%);
  background: linear-gradient(180deg, #6D28D9 0%, #DB3D8D 100%);
  background: linear-gradient(180deg, #8B1FEA 0%, #E54891 100%);
  background: linear-gradient(180deg, #7226D9 0%, #D9468F 100%);
  background: linear-gradient(180deg, #5F2BD3 0%, #E23D89 100%);
  background: linear-gradient(180deg, #176B68 0%, #7196B5 100%);
  background: linear-gradient(180deg, #315C4C 0%, #176B68 100%);
  background: linear-gradient(180deg, #183153 0%, #7196B5 100%);
  background: linear-gradient(180deg, #176B68 0%, #E9826E 100%);
  background: linear-gradient(180deg, #315C4C 0%, #D5A447 100%);
  background: linear-gradient(180deg, #7B16E8 0%, #E83E8C 100%);
  background: linear-gradient(90deg, #7B16E8 0%, #E83E8C 100%);
  background: linear-gradient(135deg, #176B68 0%, #7196B5 100%);
  background: linear-gradient(135deg, #2563EB 0%, #14B8A6 100%);
  background: linear-gradient(135deg, #14B8A6 0%, #8B5CF6 100%);
  background: linear-gradient(135deg, #4F46E5 0%, #EC4899 100%);
  background: linear-gradient(135deg, #0F766E 0%, #38BDF8 100%);
  background: linear-gradient(135deg, #2563EB 0%, #14B8A6 100%);
  background: linear-gradient(135deg, #0F766E 0%, #38BDF8 100%);
  background: linear-gradient(135deg, #14B8A6 0%, #8B5CF6 100%);
  background: linear-gradient(135deg, #12B8A6 0%, #6C63FF 55%, #8B5CF6 100%);
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%); */
}

.btn--white {
  background: rgba(58, 127, 195, 0);
  color: #ffffff;
  border: 2px solid white;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: all 0.35s ease-in-out;
  line-height: 1;
  text-transform: uppercase;
}
.btn--white:hover {
  background: #0F9F95;
  box-shadow: var(--shadow-card);
  position: relative;
  /* transform: translateY(-2px); */
  background-color: #ffffff;
  color: #ffffff;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  border: 2px solid var(--border);
}

.btn--cta {
  background: var(--green);
  font-weight: 400;
  color: #ffffff;
  padding: 6px 14px;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  box-shadow: var(--shadow-card);
  transition: all 0.35s ease-in-out;
}
/* .btn--cta:hover {
  transform: translateY(-2px);
} */

.btn-watch-demo {
  position: relative;
  transition: all 0.35s ease-in-out;
}
.btn-watch-demo span {
  background-image: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.btn-watch-demo svg {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #0F9F95, #4F6FEA, #8B5CF6);
  mask: center/contain no-repeat;
  -webkit-mask: center/contain no-repeat;
  border-radius: 7px;
}
.btn-watch-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.btn-watch-demo:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%) !important;
  color: #ffffff;
}
.btn-watch-demo:hover span {
  background-image: none !important;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border: 2px solid #ffffff;
  font-weight: 400;
  transition: all 0.35s ease-in-out;
}

.btn--ghost::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  border: 1px solid #f5f5f5;
  box-shadow: 0 0 35px hsla(0, 0%, 100%, 0.8);
  pointer-events: none;
}

.btn--ghost:hover {
  transform: translateY(-2px);
  background-color: #ffffff;
  color: #ffffff;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  border: 2px solid var(--border);
}

.btn--ghost-onDark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.btn--lg {
  padding: 17px 37px;
  font-size: 16px;
  font-weight: 600;
}

.btn--md {
  font-size: 16px;
  font-weight: 500;
  padding: 10px 18px;
}

.btn--sm {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
}

.btn--block {
  width: 100%;
  font-weight: 500;
}

/* Reveal-on-scroll hooks (see js/main.js) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } */
.dot {
  font-size: 16px;
  line-height: 1;
}

.dot--lg {
  font-size: 24px;
  line-height: 1;
}

.dot--sm {
  font-size: 14px;
  line-height: 1;
}

/* ---------- Nav (sticky) ------------------------------------ */
.nav {
  /* position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--border);  */
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  margin: 0 auto;
  transition: all 0.35s ease-in-out;
  background-color: #ffffff;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 7rem;
  width: 100%;
      padding: 1rem 0;
}
.nav__inner div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav.is-scrolled {
  transition: all 0.35s ease-in-out;
  margin: 0 auto;
  background: white;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.08), 0 2px 6px rgba(35, 40, 70, 0.04);
}
.nav.is-scrolled .nav__logo {
  height: 40px;
}
.nav.is-scrolled .nav__inner {
  height: auto;
  padding: 0.75rem;
}
.nav.is-scrolled .btn--white {
  color: #ffffff;
  padding: 9px 14px;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
}
.nav.is-scrolled .nav__links a {
  font-size: 16px;
  font-weight: 600;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
}

.nav__logo {
  height: 50px;
  transition: all 0.35s ease-in-out;
}

.nav__wordmark {
  display: none;
}
.nav__wordmark b {
  font-weight: 800;
}

.nav__links {
  display: flex;
  gap: 28px;
}

.nav__links a {
  color: #222222;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;

}
.nav__links a:hover {
  color: #4545d5;
   color:#ffffff;
  /* transform: translateY(-2px); */
}
.nav__links a:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* ---------- 1. Hero ----------------------------------------- */
/* Photo: assets/hero-manager.jpg, anchored low so her hands stay
   in frame as width grows; light 90deg wash for text legibility. */
/* .hero-bg {
   position: absolute;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    aspect-ratio: 1920 / 1200;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,.56) 0%,
            rgba(255,255,255,.44) 30%,
            rgba(255,255,255,.22) 58%,
            rgba(255,255,255,.15) 100%
        ),
        url('../assets/hero-manager-fade.png');

    background-size:
        100% 100%,
        100% auto;

    background-position:
        top,
        top center;

    background-repeat: no-repeat;

    pointer-events: none;
    z-index: 0;
} */
.section {
  position: relative;
  z-index: 1;
  background: transparent;
}

.hero {
  position: relative;
  z-index: 2;
}

.hero-bg {
  position: fixed;
  top: -9%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-bg img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100vh;
}

/* .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 30%, rgba(255, 255, 255, 0.42) 58%, rgba(255, 255, 255, 0.25) 100%);
} */

/* @media (min-width: 1700px) { .hero { min-height: 55vw; } }  widescreen headroom guard */
.hero__inner {
  /* display: grid; */
  /* grid-template-columns: 1.1fr .9fr;  */
  /* grid-template-columns: 1fr; */
  display: flex; 
  flex-direction: row;
  align-items: flex-end;
  justify-content:space-between;
  /* gap: 64px; */
  padding: 200px 24px 82px;
  /* align-items: start; */
  position: relative;
  gap: 1rem;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  width: fit-content;
}

.badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 11px 36px;
}

.badge--outline {
  background: var(--tint-2);
  color: var(--brand-text);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.badge--outline {
  color: #ffffff;
  border: 1px dashed rgb(255, 255, 255);
  text-shadow: -1px 1px 4px black;
  background-color: rgba(255, 255, 255, 0.431372549);
  color: #0c0c0c;
  border: 1px dashed rgb(255, 255, 255);
  background: rgba(247, 245, 245, 0.116);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(253, 253, 253, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
}

.badge--solid {
  background: var(--brand);
  color: #fff;
}

.hero__headline {
  /* font-size: clamp(40px, 5vw, 64px);  */
  max-width: 880px;
  font-size: clamp(40px, 6vw, 50px);
  /* filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.95)); */
  color: #080808;
  /* margin-left: 3rem; */
  font-family: "fira-sans", sans-serif;
  /* font-family: "gill-sans-nova-deco", sans-serif;
  font-family: "gill-sans-nova-inline", sans-serif;
  font-family: "gill-sans-nova-shadowed", sans-serif;
  font-family: "gill-sans-nova-inline-conden", sans-serif;
  font-family: "gill-sans-nova-extra-condens", sans-serif;
  font-family: "minion-pro", serif;
  font-family: "minion-pro-caption", serif;
  font-family: "minion-pro-display", serif;
  font-family: "minion-pro-subhead", serif;
  font-family: "minion-pro-condensed", serif;
  font-family: "minion-std-black", serif;
  font-family: "minion-pro-condensed-caption", serif;
  font-family: "minion-pro-condensed-display", serif;
  font-family: "minion-pro-condensed-subhead", serif;
  font-family: "fisterra-fora", sans-serif;
  font-family: "fisterra-morte", sans-serif; */
  /* font-weight: 700; */
  /* font-family: "lora", serif;
  font-family: "miller-text", serif;
  font-family: "miller-display", serif;
  font-family: "miller-headline", serif;
  font-family: "miller-text", serif;
  font-family: "miller-banner", serif;
  font-family: "miller-banner-ex-compressed", sans-serif;
  font-family: "miller-banner-compressed", sans-serif;
  font-family: "merriweather", serif; */
  /* font-family: "fieldwork", sans-serif;
  font-family: "fieldwork-hum", sans-serif; */
}

.hero__headline .grad-text {
  font-size: 5.5vw;
  /* margin-left: -4rem; */
  line-height: 1.5;
  margin-top: -0.5rem;
  font-style: normal;
  filter: drop-shadow(0 -1px 0px rgba(255, 255, 255, 0.95));
}

.frosted-panel {
  /* background: rgba(255, 255, 255, 0.315);  */
  /* backdrop-filter: blur(7px);  */
  border-radius: 14px;
  padding: 16px 20px 16px 0;
  /* box-shadow: var(--shadow-card);  */
}

.hero__sub {
  margin: 24px 0 12px;
  max-width: 570px;
  font-size: 1.15rem;
  color: #000000;

  font-weight: 400;
  letter-spacing: 0.5px;
  margin-bottom: 2rem;
  /* font-family: 'fira-sans', sans-serif; */
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  position: absolute;
  /* bottom: -2rem;
  right: 3rem; */
  bottom: 11rem;
  right: 13rem;
}

/* Floating product mock */
.hero__mock {
  /* position: relative; */
  /* position: absolute;
  right: 0; */
  /* width: 400px; */
  bottom: -1rem;
  margin-right: 8rem;
  margin-top: -5rem;
  margin-bottom: 3rem;
}

.pill {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  padding: 15px 24px;
}

.pill--risk {
  /* position: absolute; top: -52px; right: 0; background: #fff; border: 1px solid rgba(99,102,241,.15);  */
  position: absolute;
  background: #0f9f95;
  color: white;
  font-weight: 500;
  bottom: -25%;
  left: 9%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pill--risk-one {
  background-color: #074945;
  bottom: -19%;
  right: 8%;
}

/* .pill--risk::after {
  content: "";
    position: absolute;
    inset: 2px;
    border-radius: 10px;
    border: 1px solid #f5f5f5;
    box-shadow: 0 0 35px hsla(0, 0%, 100%, .8);
    pointer-events: none;
} */
.pill--result {
  position: absolute;
  bottom: -20px;
  right: -12px;
  background: #2192ad;
  color: #fff;
  font-weight: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mock-card {
  /* background: rgba(255, 255, 255, 0.4941176471); */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* backdrop-filter: blur(7px); */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #ffffff; 
}

.mock-card__bar {
  font-size: 13px;
  font-weight: 600;
  padding: 12px 18px;
  border: 1px solid var(--border);
  background-color: #ffffff;
  border-radius: 10px;
  /* box-shadow: var(--shadow-card); */
}

.mock-card__step {
  padding: 14px 15px;
}

.mock-card__step h4 {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.mock-card__step blockquote {
  background: var(--tint-2);
  border-radius: 10px;
  padding: 12px 14px;
  font-style: italic;
  font-size: 13px;
  margin-top: 8px;
}

/* -- hero mock reads as a product screenshot -- */
.mock-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: #EEF1F4;
  border-bottom: 1px solid var(--border);
      border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin-bottom: 10px;
    display: none;
}
.mock-chrome__dots { display: inline-flex; gap: 6px; }
.mock-chrome__dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #D4D9DF; display: inline-block;
}

.mock-chrome__dots i:first-child {
  background-color: red;
}
.mock-chrome__dots i:nth-child(2){
  background-color:  rgb(247, 191, 39);
}
.mock-chrome__dots i:last-child {
  background-color: rgb(15, 184, 15);
}
.mock-chrome__url {
  flex: 1; background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 14px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* Buyer descriptor strip */
/* .hero__designed-for { background: rgba(238,242,255,.75); padding: 14px 0; } */
.hero__designed-for .container {
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
}

/* .hero__designed-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.hero__designed-for ul { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--muted); } */
.hero__designed-for {
  padding: 5rem 1rem 6rem 1rem;
  background: transparent;
  margin-top: 0rem;
}

.hero__designed-for .container {
  display: block;
}

.hero__designed-label {
  display: block;
  margin-bottom: 18px;
  font-size: 17px;
  font-weight: 300;
  margin-left: 5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.hero__designed-for ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 35px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero__designed-for li {
  border: 1px solid rgba(220, 224, 235, 0.8);
  backdrop-filter: blur(7px);
  border-radius: 24px;
  text-align: center;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.08), 0 2px 6px rgba(35, 40, 70, 0.04);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 190px;
  font-size: 15.5px;
  font-weight: 500;
  color: #222222;
  position: relative;
  transition: all 0.35s ease;
}

.hero__designed-for li::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid rgba(220, 224, 235, 0.8);
  pointer-events: none;
}

.hero__designed-for li:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(35, 40, 70, 0.12), 0 3px 8px rgba(35, 40, 70, 0.05);
}

.hero__designed-for li img {
  width: 100%;
  height: 210px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}

.hero__designed-for li span {
  margin: 0 0 15px 0;
  text-align: center;
  font-family: "fira sans", sans-serif;
  font-family: "fira-sans", sans-serif;
      letter-spacing: 0.4px;
}

/* ---------- 2. The problem (tint) ---------------------------- */
/* .problem { background: var(--tint-1); } */
.problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
}

.problem__card {
  padding: 50px 55px;
  /* padding: 40px 47px 40px 58px; */
  padding: 40px 45px 40px 45px;
  position: relative;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(220, 224, 235, 0.8);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.08), 0 2px 6px rgba(35, 40, 70, 0.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: all 0.35s ease-in-out;
}
.problem__card p {
  color:#757575;
}

.problem__card::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid #f1f0f0;
  box-shadow: 0 0 35px hsla(0, 0%, 100%, 0.8);
  pointer-events: none;
}

.problem__card h3 {
    font-family: "fira-sans", sans-serif;
    letter-spacing: 1px;
}

.problem__num {
  font-size: 70px;
  font-weight: 800;
  color: #C7CBF5;
  color: #97cbff;
  font-family: "merriweather", serif;
  /* font-family: "fira-sans", sans-serif; */
  text-shadow: 3px 3px 6px #6e6e6e;
  line-height: 1;
  /* position: absolute; */
  /* left: -1.5rem;
  top: 2.5rem; */
  z-index: 1;
  /* color: #C6E4E0;  */
  text-shadow: none;
  /* margin-bottom: 1rem; */
  /* background-color: #074945; */
  /* border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; */


  /* &::after {
    content: "";
    border-top: 1px solid #c6e4e0;
    display: block;
    width: 100px;
    margin-top: -1.5rem;
     margin-left: 3.5rem;
  } */
}

/* ---------- 3. The solution (white) -------------------------- */

.solution {
  background-color: whitesmoke;
}
.solution__cards {
  /* display: grid; */
  /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
  display: flex;
  flex-direction: row;
  gap: 30px;
  margin: 0 auto;
  max-width: 1120px;
}

.audience-card {
  border-radius: 16px;
  padding: 0 45px 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
    border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: white;
  /* box-shadow: 0 8px 24px rgba(35, 40, 70, 0.08), 0 2px 6px rgba(35, 40, 70, 0.04); */
  /* box-shadow: 0 8px 15px rgba(35, 40, 70, 0.596), 0 2px 6px rgba(35, 40, 70, 0.04); */
  background: rgba(255, 255, 255, 0.7490196078);
  backdrop-filter: blur(9px);
  gap: 2rem;
}
/* .audience-card--one .audience-card-img {
  margin-top: 2rem;
  margin-bottom: 0.25rem;
  padding: 14px 0 10px 0;
} */
/* .audience-card--one img {
  margin-top: -2.5rem;
  margin-right: 0;
  margin-left: 0.61rem;
  margin-bottom: 0;
  width: 100% !important;
} */
.audience-card--two {
  display: flex;
  flex-direction: row;
}
/* .audience-card--two .audience-card-img {
  margin-top: 2rem;
  margin-bottom: -2rem;
  padding: 14px 0 9px 0;
} */
/* .audience-card--two img {
  margin-top: -1.75rem;
  margin-left: 0.5rem;
  margin-bottom: 0;
} */
.audience-card-img {
  padding: 0;
  /* border: 1px solid #e8e8e8; */
  /* border-radius: 22px; */
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  /* background: white; */
  /* box-shadow: 0 8px 24px rgba(35, 40, 70, 0.08), 0 2px 6px rgba(35, 40, 70, 0.04);
  box-shadow: 0 8px 15px rgba(35, 40, 70, 0.596), 0 2px 6px rgba(35, 40, 70, 0.04);
  background: rgba(255, 255, 255, 0.7490196078);
  backdrop-filter: blur(9px); */
}

.audience-card img {
  height: 320px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* border-radius: 22px; */
    border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  position: relative;
  width: 270px;
}
.audience-card img::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid #f1f0f0;
  box-shadow: 0 0 35px hsla(0, 0%, 100%, 0.8);
  pointer-events: none;
}

.audience-card__body {
  padding: 30px 28px 20px 10px;
  padding: 0;
  flex: 1;
}

.audience-card__label {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-text);
  color: #4150ee;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-end;
  align-items: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}
.audience-card__label svg {
  height: 44px;
  width: 46px;
  stroke-width: 1.1;
}
.audience-card__label--one svg {
  height: 55px;
  width: 46px;
  stroke-width: 1.1;
  margin-top: -8px;
}
.audience-card__label--two svg {
  width: 56px;
  margin-left: -10px;
}

.briefcase-path {
  transform: translate(12.04px, -2.44px) scale(0.63);
  transform-box: fill-box;
  stroke-width: 1.9;
}

.manager-body-path {
  transform: translate(0.04px, -0.94px) scale(1);
  transform-box: fill-box;
}

.tie-path {
  transform: translate(-0.29px, 10.76px) scale(0.53);
  transform-box: fill-box;
  stroke-width: 1.7;
}

.tie-knot-path {
  transform: translate(-0.28px, 13.18px) scale(0.53);
  transform-box: fill-box;
  stroke-width: 1.7;
}

/* ---------- 4. Demo (video) ---------------------------------- */
.demo__frame {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 25px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.demo__frame-content-1 {
  position: absolute;
  background-color: white;
  right: -3rem;
  top: 6rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 31px;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.596), 0 2px 6px rgba(35, 40, 70, 0.04);
  background: rgba(255, 255, 255, 0.7490196078);
  backdrop-filter: blur(9px);
}
.demo__frame-content-1 svg {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: #16a298;
  stroke-width: 2;
}
.demo__frame-content-2 {
  position: absolute;
  max-width: 170px;
  right: -13rem;
  bottom: 2rem;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.596), 0 2px 6px rgba(35, 40, 70, 0.04);
  background: rgba(255, 255, 255, 0.7490196078);
  backdrop-filter: blur(9px);
}
.demo__frame-content-2 span {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}
.demo__frame-content-2 div {
  padding: 5px;
  line-height: 1.4;
}
.demo__frame-content-2 img {
  max-width: 150px;
  border-radius: 13px;
}
.demo__frame-content-3 {
  position: absolute;
  left: 2rem;
  bottom: -4rem;
  background-color: white;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.596), 0 2px 6px rgba(35, 40, 70, 0.04);
  background: rgba(255, 255, 255, 0.7490196078);
  backdrop-filter: blur(9px);
  font-weight: 600;
  color: #0F1120;
  transition: all 0.35s ease-in-out;
}
.demo__frame-content-3:hover {
  transform: translateY(-2px);
}
.demo__frame-content-3 img {
  max-width: 150px;
  border-radius: 12px;
}
.demo__frame-content-3 div {
  display: flex;
  flex-direction: column;
  align-items: self-start;
  gap: 13px;
  padding: 0.5rem;
}
.demo__frame-content-3 span {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}
.demo__frame-content-3 button {
  background: #0f9f95;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  color: white;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 9px;
  outline: none;
  border: none;
  transition: all 0.35s ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid white;
}
.demo__frame-content-3 button:hover {
  transform: translateY(-2px);
}
.demo__frame-content-4 {
  position: absolute;
  left: -13rem;
  top: 6rem;
  background-color: #C7CBF5;
  padding: 10px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  max-width: 180px;
  box-shadow: 0 8px 14px rgba(35, 40, 70, 0.226), 0 2px 6px rgba(35, 40, 70, 0.04);
}
.demo__frame-content-4__title {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
}
.demo__frame-content-4 div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #ffffff;
  padding: 4px;
}
.demo__frame-content-4 svg {
  width: 95px;
  height: 95px;
  color: white;
  stroke-width: 1;
}
.demo__frame-content-4 span {
  display: block;
}
.demo__frame-content-4 img {
  width: 200px;
}
.demo__frame-content-5 {
  position: absolute;
  background-color: white;
  top: 10rem;
  right: -4.3rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 31px;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.596), 0 2px 6px rgba(35, 40, 70, 0.04);
  background: rgba(255, 255, 255, 0.7490196078);
  backdrop-filter: blur(9px);
  background: #009688;
  backdrop-filter: blur(9px);
  color: white;
}
.demo__frame-content-5 svg {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: #f9fafa;
  stroke-width: 1.5;
}

.demo__frame-main {
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.demo__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, #3a7cc1, #0F1120);
  color: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

/* "View demo" pill over the paused main video */
.demo__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px 14px 22px;
  border: 2px solid #fdfdfd;
  border-radius: 999px;
  background-color: rgb(1 1 1 / 82%);
  color: #ffffff;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: background-color .25s ease, transform .25s ease;
}
.demo__play:hover {
  background-color: var(--teal, #4150ee);
  transform: translate(-50%, calc(-50% - 2px));
}
.demo__play svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
  flex-shrink: 0;
}

.demo__placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbnails float inside the player, bottom-centre, just above the
   native control bar; they fade out while the main video plays */
.demo__thumbs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 49px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 142px);
  gap: 15px;
  transition: opacity .3s ease;
}
.demo__placeholder.is-playing .demo__thumbs {
  opacity: 0;
  pointer-events: none;
}
.demo__thumb {
  position: relative;
  aspect-ratio: 14/9;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 8px;
  overflow: hidden;
  background: #0F1120;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .25s ease, border-color .25s ease, opacity .25s ease;
  opacity: .9;
}
.demo__thumb:hover,
.demo__thumb:focus-visible { opacity: 1; transform: translateY(-2px); border-color: #fff; }
.demo__thumb.is-active { opacity: 1; border-color: var(--teal, #4150ee); }
.demo__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.demo__thumb-play {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #fdfdfd;
  background-color: rgb(1 1 1 / 75%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.demo__thumb-play svg {
  width: 17px;
  height: 17px;
  margin-right: -2px;
  stroke-width: 1.5;
}
.demo__thumb-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 6px 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(to top, rgba(15, 17, 32, .9), transparent);
}
/* Mobile: thumbnails leave the player and sit in a row underneath it,
   always visible, so they never cover the video or its controls */
@media (max-width: 767px) {
  .demo__frame, .demo__frame-main { overflow: visible; aspect-ratio: auto; box-shadow: none; }
  .demo .demo__placeholder { display: block; height: auto; background: transparent; overflow: visible; }
  .demo__placeholder video { height: auto; aspect-ratio: 16/9; border-radius: 14px; background: transparent; }
  .demo__thumbs {
    position: static; transform: none;
    grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px;
  }
  .demo__placeholder.is-playing .demo__thumbs { opacity: 1; pointer-events: auto; }
  .demo__thumb { border-radius: 8px; border-color: transparent; box-shadow: 0 2px 8px rgba(20, 26, 36, .15); }
  .demo__thumb.is-active { border-color: var(--teal, #4150ee); }
  .demo__thumb-label { font-size: 10.5px; padding: 10px 6px 4px; }
  .demo__thumb-play { width: 24px; height: 24px; }
  .demo__thumb-play svg { width: 16px; height: 16px; }
}
@media (max-width: 420px) {
  .demo__thumbs { gap: 8px; }
  .demo__thumb-label { font-size: 9.5px; }
}

/* Video modal (showcase thumbnails) */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* above the trust banner */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.video-modal[hidden] { display: none; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 32, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.video-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: #070707;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  padding-bottom: 30px;
  border: 1px solid #4c4c4c;
}
.video-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.video-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s ease;
}
.video-modal__close:hover { background: rgba(255, 255, 255, .12); }
.video-modal video {
  display: block;
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 16/9;
  background: #000;
}

/* ---------- 5. Features + risk panel -------------------------- */
.features {
  padding: 126px 0 40px 0;
}

.features__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.features__header h2 {
  font-size: 44px;
  text-align: left;
  font-size: 2.6rem;
  /* font-family: "merriweather", serif; */
  font-family: "fira-sans", sans-serif;
  line-height: 1.4;
}

.features__header .section__sub {
  margin-bottom: 3rem;
}

.features__list {
  list-style: none;
  padding: 0;
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.features__list li {
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  padding: 0 33px 33px 33px;
  border-radius: 12px;
  color: white;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(220, 224, 235, 0.8);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.08), 0 2px 6px rgba(35, 40, 70, 0.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: all 0.35s ease-in-out;
}
.features__list li::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid #f1f0f0;
  box-shadow: 0 0 35px hsla(0, 0%, 100%, 0.8);
  pointer-events: none;
}

.feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
}

.feature__icon {
  width: 57px;
  height: 57px;
  border-radius: 555px;
  z-index: 11;
  background: var(--tint-2);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1rem;
  box-shadow: 0 4px 14px rgba(35, 40, 70, 0.396), 0 2px 6px rgba(35, 40, 70, 0.04);
  position: relative;
}
.feature__icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(67, 95, 185, 0.0392156863);
  box-shadow: 0 0 35px hsla(0, 0%, 100%, 0.8);
  pointer-events: none;
}
.feature__icon svg {
  color: #444444;
  width: 40px;
  height: 40px;
  stroke-width: 0.8;
}

.feature h3 {
  font-size: 17px;
  margin-bottom: 12px;
  color: #1998a3;
}

.feature p {
  color: var(--muted);
  font-size: 14.5px;
}

.risk-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 90px;
  align-self: start;
  box-shadow: 0 8px 14px rgba(35, 40, 70, 0.363), 0 2px 6px rgba(35, 40, 70, 0.04);
}

.risk-panel__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  font-size: 22px;
}

.dot--red {
  background: #FF605C;
}

.dot--amber {
  background: #FFBD44;
}

.dot--green {
  background: #00CA4E;
}

.risk-panel__body {
  padding: 16px 16px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: #ffffff;
  border-radius: 0 0 18px 18px;
}

.alert {
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12.5px;
  margin: 12px 0;
}

.alert h4 {
  font-size: 13px;
  margin-bottom: 4px;
}

.alert--red {
  background: var(--red-bg);
  border: 1px solid var(--red-line);
  color: #B91C1C;
}

.alert--red h4 {
  color: var(--red);
}

.alert--amber {
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  color: #92400E;
}

.alert--amber h4 {
  color: var(--amber);
}

.alert--blue {
  background: var(--blue-bg);
  border: 1px solid var(--blue-line);
  color: #1E40AF;
}

.alert--blue h4 {
  color: var(--blue);
}

.risk-panel__ack {
  border: 1px dashed rgba(99, 102, 241, 0.4);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text);
}

/* ---------- 6. How it works (timeline) ------------------------ */
.timeline {
  list-style: none;
  max-width: 990px;
  margin: 0 auto;
  padding: 80px 70px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  position: relative;
  border: 1px solid rgba(220, 224, 235, 0.8);
  backdrop-filter: blur(7px);
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(35, 40, 70, 0.08), 0 2px 6px rgba(35, 40, 70, 0.04);
  transition: all 0.35s ease;
}
.timeline::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(220, 224, 235, 0.8);
  pointer-events: none;
}

/* Centre vertical line */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50px;
  bottom: 70px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(79, 70, 229, 0.35) 6%, rgba(79, 70, 229, 0.35) 94%, transparent);
}

/* Timeline rows */
.timeline__step {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 25px;
  align-items: flex-start;
  padding-bottom: 50px;
  position: relative;
}

.timeline__step:last-child {
  padding-bottom: 0;
}

/* Number circles */
.timeline__num {
  grid-column: 2;
  grid-row: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  box-shadow: 0 2px 9px rgba(35, 40, 70, 0.396), 0 2px 6px rgba(35, 40, 70, 0.04);
  z-index: 2;
}

/* Text container */
.timeline__content {
  max-width: 370px;
}

/* Left side items */
.timeline__step:nth-child(odd) .timeline__content {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

/* Right side items */
.timeline__step:nth-child(even) .timeline__content {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

/* Headings */
.timeline__content h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--brand-text);
  color: #4150ee;
  color: #6f93e0;
}

/* Paragraphs */
.timeline__content p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Mobile layout */
@media (max-width: 768px) {
  .timeline {
    padding: 40px 25px;
  }
  .timeline::before {
    left: 28px;
    transform: none;
  }
  .timeline__step {
    grid-template-columns: 56px 1fr;
    gap: 20px;
  }
  .timeline__num {
    grid-column: 1;
  }
  .timeline__step:nth-child(odd) .timeline__content,
  .timeline__step:nth-child(even) .timeline__content {
    grid-column: 2;
    text-align: left;
    justify-self: start;
  }
  .timeline__content {
    max-width: none;
  }
}
/* ---------- 7. Difference (photo band) ------------------------ */
/* Photo: assets/difference-team.jpg — pre-cropped with headroom
   baked in and side vignettes; capped width so it never balloons. */
.difference {
  background: #F7F8FC url("../assets/different-2.png") center bottom/min(100%, 1150px) auto no-repeat;
  text-align: center;
  padding: 2px 24px 90px 24px;
  text-align: center;
  background-size: cover;
  background-position: bottom center;
  height: 1125px;
  margin: 6rem 0 0 0;
}

.difference__copy h2 {
  font-size: clamp(22px, 3.4vw, 32px);
}

.difference__copy .section__sub {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

/* ---------- 8. Why this matters (voices) ---------------------- */
.section.voices {
  padding: 6rem 2rem 8rem 2rem;
  background-color: #141A24;
}

.section.voices .section__grad-text {
  color: #ffffff;
}

.voices__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.voice-card {
  background: #fff;
  border: 1px solid #323232;
  border-radius: var(--radius);
  padding: 40px 25px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.voice-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid rgba(220, 224, 235, 0.8);
  pointer-events: none;
}
.voice-card footer {
  margin-top: 20px;
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.voice-card__name {
  display: flex;
  flex-direction: column;
}
.voice-card small {
  color: grey;
  font-weight: 400;
  line-height: 1.2;
}
.voice-card__avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* background: var(--tint-2); */
  background-color: #dfeefb;
  color: #4150ee;
  font-size: 12px;
  font-weight: 800;
  margin-right: 5px;
}
.voice-card--img {
  background-color: #c7cbf5;
  width: 100%;
  height: 100%;
  min-height: 370px;
  background-image: url("../graded-preview/testimonial-tr.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  justify-content: end;
}
.voice-card--img .voice-card__avatar {
  width: 45px;
  height: 45px;
}
.voice-card--img span {
  margin-top: -10px;
  margin-bottom: 5px;
}
.voice-card--img span svg {
  rotate: 180deg;
}
.voice-card--img footer {
  display: flex;
  align-items: center;
  margin-top: 16px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  font-size: 26px !important;
  line-height: 1 !important;
  text-shadow: 3px 3px 9px black;
}

.voices__disclaimer {
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 28px;
} /* must stay with this section */
/* ---------- 9. Founding offer (tint) --------------------------- */
.pricing {
  /* background: var(--tint-1); */
  background-color: #dfeefb;
  padding: 98px 0 80px 0;
}

.offer-card {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 70px;
  box-shadow: var(--shadow-card);
  box-shadow: 0 3px 18px rgba(35, 40, 70, 0.263), 0 2px 6px rgba(35, 40, 70, 0.04);
}
.offer-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid rgba(220, 224, 235, 0.8);
  pointer-events: none;
}
.offer-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}
.offer-card button {
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  width: -moz-fit-content;
  width: fit-content;
  padding: 12px 30px;
  border: 1px solid white;
  transition: all 0.3s ease-in-out;
}
.offer-card button:hover {
  transform: translateY(-2px);
}

.offer-card__flag {
  z-index: 1;
  position: absolute;
  top: 23px;
  left: 32px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 999px;
  background: rgba(245, 246, 247, 0.548);
  border: 2px solid white;
  box-shadow: var(--shadow-card);
  transition: all 0.35s ease-in-out;
  line-height: 1;
  text-transform: uppercase;
  color: black;
  box-shadow: 0 4px 14px rgba(35, 40, 70, 0.263), 0 2px 6px rgba(35, 40, 70, 0.04);
  box-shadow: none;
  background: #EFBF04;
  border: 1px solid var(--border);
  text-transform: none;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 13.5px;
  color: #000000;
}

.offer-card__label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  color: #000000;
  text-align: center;
}

.offer-card__price {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  text-align: center;
}

.offer-card__price b {
  font-size: 80px;
  font-weight: 800;
}

.offer-card__price span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 0px;
  margin-left: -26px;
}

.ticklist {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
}

.ticklist li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ticklist li span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ticklist li svg {
  stroke: #C7CBF5;
}

.offer-card__spots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  margin: 3rem 1rem 0 1rem;
}

.spots-bar {
  flex: 1;
  height: 6px;
  background: var(--tint-2);
  border-radius: 99px;
  overflow: hidden;
}

.spots-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width 0.6s ease;
}

.pricing__smallprint {
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 48px;
  max-width: 900px;
  margin: 3rem auto 1rem auto;
}

/* ---------- 10. CTA banner + footer ---------------------------- */
.cta-banner {
  background-image: url("../assets/cta-banner.png");
  color: #181818;
  text-align: center;
  background-color: #ffffffe1;
}

.cta-banner h2 {
  font-size: clamp(28px, 4vw, 44px);
  max-width: 720px;
  margin: 0 auto 16px;
}

/* .cta-banner p {
  max-width: 720px;
  margin: 0 auto 28px;
} */

.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-banner__reassure {
  font-size: 13px;
  margin-top: 24px;
  color: rgba(56, 56, 56, 0.85);
  margin: 16px auto 28px !important;
}

.footer {
  background-color: #ffffff;
  border-top: 1px solid var(--border);
  padding: 40px 0 20px 0;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 111;
}

.footer__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  max-width: 920px;
  line-height: 1;
}
.footer__inner p {
  line-height: 1;
}

.footer__legal {
  font-size: 13px;
  color: #9e9e9e;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink);
}

.footer__logo {
  height: 37px;
  margin-top: -16px;
}

.footer__links {
  display: flex;
  gap: 18px;
}

.footer__links a {
  color: var(--muted);
  text-decoration: none;
  transition: all 0.35s ease-in-out;
}
.footer__links a:hover {
  color: #4545d5;
}

/* ---------- Plans modal ---------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* above the sticky trust banner and footer */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 32, 0.55);
}

.modal__panel {
  position: relative;
  background: #fff;
  border-radius: 24px;
  max-width: 1120px;
  width: 100%;
  padding: 44px 48px;
}

.modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}

.plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 26px 0 22px;
}

.plan-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius);
  padding: 26px 22px;
}

/* Featured card keeps its flag only; the border is reserved for the chosen plan */

.plan-card__flag {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
}

.plan-card__price {
  font-size: 30px;
  font-weight: 800;
}

.plan-card__price span {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}

.plan-card__size {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 14px;
}

.plan-card__seats {
  font-size: 12.5px;
  margin-bottom: 14px;
}

.plan-card .ticklist {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-size: 12.5px;
}

/* Plan chosen by clicking a card: highlight it, soften the others */
.plan-card { transition: opacity .25s ease, box-shadow .25s ease, border-color .25s ease; scroll-margin: 24px; cursor: pointer; }
.plan-card:hover { border-color: var(--teal, #4150ee); }
.plan-card:focus-visible { outline: 2px solid var(--teal, #4150ee); outline-offset: 3px; }
.plans__grid.has-selection .plan-card:not(.is-selected) { opacity: .55; }
.plans__grid.has-selection .plan-card:not(.is-selected):hover { opacity: 1; }
.plan-card.is-selected {
  border: 2px solid var(--teal, #4150ee);
  box-shadow: 0 0 0 5px rgba(65, 80, 238, .14);
}

.plans__footnote {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 22px;
}

/* ---------- Responsive ------------------------------------------ */
@media (max-width: 1000px) {
  .hero__inner, .features__layout {
    grid-template-columns: 1fr;
  }
  .hero__mock {
    max-width: 560px;
  }
  .problem__grid, .voices__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .section {
    padding: 64px 0;
  }
  .hero {
    background-size: auto, cover;
    background-position: 0 0, 48% 20%;
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.3);
  }
  .hero__headline {
    font-size: 10.5vw;
  }
  .nav__links {
    display: none;
  } /* replace with burger menu at build */
  .timeline {
    padding: 30px 20px;
  }
  .timeline::before {
    left: 47px;
    top: 44px;
    bottom: 44px;
  }
  .modal__panel {
    padding: 28px 20px;
  }
}
.auto-scroll-box {
  /* height: 420px; */
  overflow-y: auto;
  scroll-behavior: smooth;
  /* padding: 20px; */
  /* padding: 10px; */
  border-radius: 14px;
  position: relative;
}

/* .auto-scroll-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1px solid #f5f5f5;
  box-shadow: 0 0 35px hsla(0, 0%, 100%, 0.8);
  pointer-events: none;
} */

.scroll-box__inner {
  /* height: 100%;
  overflow-y: auto;
  padding-right: 10px; */

  padding: 0 15px;
  padding: 10px 10px 5px 10px;
}

/* .scroll-box__inner::-webkit-scrollbar {
  width: 10px;
  background: transparent;
} */

/* scroll bar in the box ----------------------------- */

/* .scroll-box__inner::-webkit-scrollbar-button,
.scroll-box__inner::-webkit-scrollbar-button:single-button,
.scroll-box__inner::-webkit-scrollbar-button:vertical:start:decrement,
.scroll-box__inner::-webkit-scrollbar-button:vertical:end:increment {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
} */

/* .scroll-box__inner::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 999px;
}

.scroll-box__inner::-webkit-scrollbar-thumb {
  background: #0F9F95;
  border-radius: 999px;
}

.scroll-box__inner::-webkit-scrollbar-thumb:hover {
  background: #074945;
}

.scroll-box__inner::-webkit-scrollbar-corner {
  background: transparent;
} */

/* @keyframes gradientMove {
	to {
		background-position: 200% center;
	}
}

@keyframes textPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}
 */
@keyframes gradientMove {
  to {
    background-position: 200% center;
  }
}
@keyframes textPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes textPulseBig {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}/*# sourceMappingURL=styles.css.map */
/* ============================================================
   UpToDate-inspired additions (Oct 2026) — port into styles.scss
   Utility topbar · dropdown nav · stats band · feature tabs ·
   mega footer. Palette follows the new gradient system.
   ============================================================ */

/* ---- Utility topbar ---- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 49;
  font-size: 13px; 
  /* color: #5A6172;
  background: rgba(255,255,255,.65); */
  color: #ffffff;
  /* background: #009688; */
  background-color: #032a80;
  /* background: #141a24; */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(220,224,235,.6);
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.topbar__right { display: flex; gap: 22px; align-items: center; }
.topbar a { color: #5A6172; 
  color:#ffffff;
  text-decoration: none; transition: color .25s; }
.topbar a:hover { color: #4545d5;  color:#ffffff; }
.topbar__login { color: #9aa0b0; color:#ffffff; }
.nav { margin-top: 2.1rem; }
.nav.is-scrolled { margin-top: 0; }

/* ---- Stats band ---- */
.stats { 
  padding: 46px 0 56px; 
  position: relative; 
  z-index: 1; 
  background: #141A24; 
  padding: 76px 0; 
  margin-top: 0; 
}
.stats__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  background: rgb(255,255,255);
  border: 1px solid rgba(220,224,235,.8); border-radius: 18px;
  box-shadow: 0 8px 24px rgba(35,40,70,.08), 0 2px 6px rgba(35,40,70,.04);
  padding: 34px 40px;
}
.stat { display: flex; flex-direction: column; gap: 6px; text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: -16px; top: 10%; bottom: 10%; width: 1px; background: rgba(220,224,235,.9); }
.stat__num {
  font-family: "merriweather", serif; font-weight: 800; font-size: 44px; line-height: 1.1;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { font-size: 14px; color: var(--muted); max-width: 300px; margin: 0 auto; }

/* ---- Mega footer ---- */
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
  width: 100%; max-width: var(--container); padding: 16px 24px 28px; align-items: start;
}
.footer__brandcol { display: flex; flex-direction: column; gap: 8px; }
.footer__brandcol .footer__logo { height: 44px; width: auto; align-self: flex-start; margin: 0; }
.footer__tag { font-style: italic; color: var(--muted); }
.footer__col { display: flex; flex-direction: column; gap: 9px; }
.footer__col h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #9aa0b0; margin-bottom: 4px;
}
.footer__col a { color: var(--muted); text-decoration: none; font-size: 13.5px; transition: color .25s; }
.footer__col a:hover { color: #4545d5; }
.footer__legalrow { border-top: 1px solid rgba(220,224,235,.7); width: 100%; display: flex; justify-content: center; padding-top: 18px; }

/* ---- Responsive for additions ---- */
@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .stats__row { grid-template-columns: 1fr; gap: 26px; }
  .stat + .stat::before { display: none; }
}
@media (max-width: 700px) {
  .topbar__left { display: none; }
  .features__tabs { flex-wrap: wrap; }
}

/* ============================================================
   Layout treatments kept (Oct 2026): banded section pages
   ============================================================ */

/* ---- Banded section 'pages' ---- */
section.section--band {
  /* background: #ffffff; */
  /* background-color: #f2f8f7; */
  background-color: #dfeefb;
  border-top: 1px solid rgba(220,224,235,.7);
  border-bottom: 1px solid rgba(220,224,235,.7);
}

.section--band.how {
  background-color: #000000;
  background:#ffffff;
  /* color: #ffffff; */
}

@media (max-width: 700px) {
  .subnav__title { display: none; }
  .subnav.is-visible { top: 58px; }
}

/* anchor jumps clear the fixed nav + section menu */
section[id] { scroll-margin-top: 130px; }

/* ---- Audience tiles (Designed for → three plan groups) ---- */
.strip-headline {
  /* font-family: "merriweather", serif; */
  font-family: "fira-sans", sans-serif;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 800; 
  line-height: 1.35;
  max-width: 890px; 
  margin: 0 auto 3rem auto;
  text-align: center;
}
.strip-headline b {
  font-weight: 800;
  background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%);
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent;
}
.hero__designed-for ul.audience-tiles { 
  grid-template-columns: repeat(3, 1fr); 
  gap: 36px; 
}

.audience-tiles li { 
  min-height: 0; 
  padding:0 0 2.4rem 0; 
  gap: 15px; 
  overflow: hidden;
}
.audience-tiles li img { height: 230px; }
.audience-tiles li span { 
  font-size: 18px; 
  font-size: 1.17em;
  font-weight: 700; 
  margin: 12px 0 0; 
    padding: 0 20px 0 20px;
}
.audience-tiles li p {
  font-size: 16px;
  line-height: 1.55;
  color: #757575;
  font-weight: 400;
  padding: 0 12px; 
  flex: 1;
  padding: 0 2rem 0 2rem;
      line-height: 1.6;
}
.audience-tiles li .btn { align-self: center; margin-top: 6px; }
@media (max-width: 1000px) {
  .hero__designed-for ul.audience-tiles { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .strip-headline { text-align: center; margin-left: 0; }
}

/* ---- Sticky trust banner (the ManagerAlly difference) ---- */
body { padding-bottom: 0; }
body.has-trust-banner { padding-bottom: 69px; }
.trust-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  /* background: rgba(255,255,255,.95); */
  /* background-color: rgb(15 159 149); */
  background-color: #032a80;
  backdrop-filter: blur(9px);
  border-top: 1px solid rgba(220,224,235,.9);
  box-shadow: 0 -8px 24px rgba(35,40,70,.08);
  color: white;
  transform: translateY(110%);
  transition: transform .4s ease-in-out;
  z-index: 111111111111;
}
.trust-banner.is-visible { transform: translateY(0); }
.trust-banner__inner { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.trust-banner__faces { display: flex; flex-shrink: 0; }
.trust-banner__faces img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(35,40,70,.18);
}
.trust-banner__faces img + img { margin-left: -12px; }
.trust-banner__text { margin: 0; line-height: 1.45; flex: 1; min-width: 0; color: white;}
.trust-banner__text b {
  display: block; 
  font-size: 15px; 
  font-weight: 600;
  /* background: linear-gradient(135deg, #0F9F95 0%, #4F6FEA 50%, #8B5CF6 100%); */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trust-banner__text span { 
  font-size: 12.5px; 
  /* color: var(--muted);  */
  color: #f0f0f0;
}
.trust-banner__close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(220,224,235,.9); background: #fff; color: #5A6172;
  cursor: pointer; font-size: 13px; transition: all .25s ease-in-out;
}
.trust-banner__close:hover { color: #4545d5; transform: translateY(-1px); }
@media (max-width: 700px) {
  .trust-banner__text span { display: none; }
  body.has-trust-banner { padding-bottom: 54px; }
}

/* ============================================================
   Humanise pass (Oct 2026): gradient restraint, card hierarchy,
   calmer motion, fewer floating chips. Port into SCSS.
   The gradient now appears ONLY on primary Register CTAs and the
   hero headline word; teal is the working brand colour elsewhere.
   ============================================================ */
:root { --teal: #4150ee; --teal-text: #032A80; }

/* -- gradient restraint -- */
.section__label, .section__label.animate {
  background: none; -webkit-text-fill-color: var(--teal-text);
  color: var(--teal-text); animation: none;
}
.grad-text, .grad-text.animate {
  background: none; -webkit-text-fill-color: var(--teal-text);
  color: var(--teal-text); animation: none;
}
.hero__headline .grad-text {
  background: linear-gradient(90deg, #122e9e, #0F9F95, #4F6FEA, #122e9e, #645197, #20635e);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradientMove 6s linear infinite;
}
.strip-headline b { background: none; -webkit-text-fill-color: var(--teal-text); color: var(--teal-text); }
.stat__num { background: none; -webkit-text-fill-color: var(--teal-text); color: var(--teal-text); }
.trust-banner__text b { 
  background: none; 
  /* -webkit-text-fill-color: var(--teal-text);  */
  color: var(--teal-text);
   color: white; 
}
.timeline__num { background: var(--teal); }
.nav__links a:hover { color: var(--teal-text); }
.nav__links a:hover::before { display: none; }
.btn--white:hover, .btn--ghost:hover { background: var(--teal); border-color: var(--teal); }
.btn-watch-demo span { background-image: none !important; -webkit-text-fill-color: var(--teal-text); color: var(--teal-text); }
.btn-watch-demo::before { background: var(--teal); opacity: .5; }
.btn-watch-demo:hover { background: var(--teal) !important; }
.btn-watch-demo svg { background: var(--teal); }
.audience-tiles .btn--cta { background: var(--teal); }
.audience-tiles .btn--cta:hover { background: var(--teal-text); }
.demo__frame-content-3 button { background: var(--teal); }
.plan-card__flag { background: var(--teal); }
.spots-bar span { background: var(--teal); }

/* -- card treatment hierarchy: rich styling stays on the hero mock
      and the founding-offer card; everything else goes quiet -- */
.problem__card::after, .hero__designed-for li::after,
.timeline::after, .voice-card::after { display: none; }
.problem__card { box-shadow: 0 1px 4px rgba(35,40,70,.05); }
.hero__designed-for li { box-shadow: 0 2px 10px rgba(35,40,70,.05); }
.timeline { box-shadow: 0 2px 12px rgba(35,40,70,.05); backdrop-filter: none; }
.voice-card { box-shadow: none; }

/* -- one asymmetric section: The problem reads left-aligned -- */
.problem .section__header { text-align: center;  margin: 0 auto 56px auto; max-width: 820px; }

/* -- fewer floating chips on the demo frame -- */
.demo__frame-content-2, .demo__frame-content-4, .demo__frame-content-5 { display: none; }

/* -- calmer motion: lift on hover is for buttons and links only -- */
.hero__designed-for li:hover { transform: none; box-shadow: 0 2px 10px rgba(35,40,70,.05); }
.demo__frame-content-3:hover { transform: none; }

/* ---- Why ManagerAlly dropdown (reinstated, single dropdown) ---- */
.nav__drop { position: relative; display: inline-block; }
.nav__caret { font-size: 10px; opacity: .55; margin-left: 2px; }
.nav .nav__inner .nav__panel {
  position: absolute; top: 100%; left: 0; padding-top: 10px;
  display: none; flex-direction: column; align-items: stretch; min-width: 240px; z-index: 60;
}
.nav__panel::before {
  content: ""; position: absolute; inset: 10px 0 0 0; background: #fff; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(35,40,70,.14), 0 3px 8px rgba(35,40,70,.06);
  border: 1px solid rgba(220,224,235,.8);
}
.nav__panel a { position: relative; padding: 11px 18px; font-size: 15px; border-radius: 10px; margin: 3px 8px; }
.nav__panel a:first-child { margin-top: 13px; }
.nav__panel a:last-child { margin-bottom: 11px; }
.nav__panel a:hover { 
  background: #f1f3fb;
  background-color: #4150ee; 
  transform: none; 
  color: #ffffff; 
}
.nav .nav__inner .nav__drop:hover .nav__panel,
.nav .nav__inner .nav__drop:focus-within .nav__panel { display: flex; }
#who { scroll-margin-top: 90px; }

/* ---- Fair Work Act badge (hero, third pill) ---- */
.badge--act { display: inline-flex; align-items: center; gap: 9px; }
.badge--act svg { flex-shrink: 0; color:#EFBF04; }

/* ============================================================
   Major-player pass (Oct 2026). Port into SCSS.
   One brand colour (teal), bigger type contrast, one dark band,
   hairline borders over shadows, unified photo grade, crafted
   hover/focus states. Gradient survives ONLY on the hero
   headline word; every control is solid teal.
   ============================================================ */

/* -- 1. One colour, hard: teal replaces indigo/pink everywhere -- */
:root {
  --brand: #0F9F95;
  --brand-text: #0B7D75;
  --brand-support: #12B3A8;
  --tint-1: #F2F8F7;
  --tint-2: #E7F3F1;
  --grad-accent: linear-gradient(90deg, #0F9F95, #0B7D75);
}
::selection { background: rgba(15,159,149,.22); }

.btn--primary, .btn--cta, .offer-card button,
.trust-banner .btn, .plan-card .btn {
  background: var(--teal);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn--primary:hover, .btn--cta:hover, .offer-card button:hover,
.trust-banner .btn:hover, .plan-card .btn:hover {
  background: var(--teal-text);
}
.topbar a:hover, .footer__col a:hover, .trust-banner__close:hover { color: var(--teal-text); }


/* -- 2. Type contrast: tighter, bigger headlines; small kickers -- */
.hero__headline {
  font-size: clamp(44px, 4.8vw, 60px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.hero__headline .grad-text { line-height: 1.3; }
.section__grad-text, .section__grad-text em {
  font-size: clamp(32px, 3.2vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.18;
}
.section__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.cta-banner h2 { letter-spacing: -0.015em; }

/* -- 3. One dark band: the stats row -- */
.stats__row {
  background: #141A24;
  border: 1px solid #141A24;
  box-shadow: none;
  padding: 44px 48px 40px;
}
.stat__num {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  font-weight: 300;
  font-size: 54px;
  font-variant-numeric: tabular-nums;
}
.stat__num::after {
  content: "";
  display: block;
  width: 28px; height: 2px;
  /* background: var(--teal); */
  background-color: #EFBF04;
  margin: 12px auto 0;
}
.stat__label { color: rgba(255,255,255,.62); }
.stat + .stat::before { background: rgba(255,255,255,.12); }

/* -- 4. Hairline borders; shadow reserved for the hero mock,
      the nav dropdown and the modal -- */
.hero__designed-for li, .audience-tiles li {
  box-shadow: none;
  border: 1px solid var(--border);
  background: #fff;
}
.hero__designed-for li:hover { box-shadow: none; }
.problem__card { box-shadow: none; border: 1px solid var(--border); }
.timeline { box-shadow: none; border: 1px solid var(--border); }
.offer-card { box-shadow: none; border: 1px solid #D7DBE4; }
.offer-card::after { display: none; }
.audience-card img { box-shadow: none; border: 1px solid var(--border); }
.audience-card img::after { display: none; }
.plan-card { box-shadow: none; }

/* -- 5. One photographic grade across all imagery -- */
.hero-bg img,
.audience-tiles li img,
.audience-card img,
.trust-banner__faces img,
.demo__frame-content-3 img {
  filter: saturate(.84) contrast(1.04) brightness(1.02) sepia(.10);
}

/* -- 6. Furniture discipline -- */
.offer-card__price, .plan-card__price, #spots-label { font-variant-numeric: tabular-nums; }
.audience-tiles li, .problem__card, .voice-card { border-radius: var(--radius); }

/* -- 7. Crafted states -- */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.footer__col a, .topbar a { transition: color .2s ease; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nav__links a { transition: all .2s ease; }

/* -- major-player pass: follow-ups from render check -- */

.nav.is-scrolled .btn--white { background: var(--teal); }
.nav.is-scrolled .btn--white:hover { background: var(--teal-text); }

/* ============================================================
   Major-player pass, round 2 (Oct 2026): the structural feel.
   Flat surfaces (no paper texture), bigger whitespace scale,
   calm hero badges, sentence-case buttons, disciplined measure.
   ============================================================ */

/* -- R2.1 flat surfaces: majors use flat white + flat tints -- */
body { background: #fff; }
.section { background-image: none; }
.problem { 
  background: #dfeefb;
}
.pricing { padding: 120px 0 96px; }
.hero__designed-for { background-image: none; background: #fff; }

/* -- R2.2 whitespace scale: 120px section rhythm -- */
.section { padding: 100px 0 100px; }
.section.voices { padding: 120px 2rem 120px; }
.section__header { margin-bottom: 55px; }
.problem .section__header {     margin: 0 auto 56px auto; }
.section__label { margin-bottom: 14px; }

/* -- R2.3 measure: subheads hold a readable column -- */
.section__sub { 
  max-width: 820px; 
  margin: 2rem auto;
}
/* .problem .section__header .section__sub { margin-left: 0; } */

/* -- R2.4 hero badges: calm chips, no dashed outline, no shout -- */
.badge, .badge--outline {
  /* background: rgba(255,255,255,.78); */
  /* background-color: #000000; */
  background-color: #141A24;
  border: 0;
  box-shadow: 0 0 0 1px rgba(33,37,47,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: none;
  /* color: var(--ink); */
  color: #ffffff;
  text-transform: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .01em;
  padding: 10px 22px;
  border-radius: 999px;
}

/* -- R2.5 sentence-case controls -- */
.btn--white { text-transform: none; letter-spacing: .01em; }

/* -- R2 follow-up: tick icons carry the brand colour -- */
.ticklist li svg { color: var(--teal); stroke: var(--teal); }

/* ============================================================
   Major-player pass, round 3 (Oct 2026): the full seven points.
   ============================================================ */

/* -- 1. One colour, HARD: the last indigo/purple/blue moments go teal -- */
.hero__headline .grad-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--teal-text);
  color: var(--teal-text);
  animation: none;
}
.demo__placeholder { background: radial-gradient(ellipse at center, #1C3B40, #0E1418); }

/* -- 2. Type contrast: hero at 64-76px, lh 1.05, hard drop to body -- */
.hero__headline {
  font-size: clamp(54px, 4.2vw, 64px);
  letter-spacing: -0.022em;
  line-height: 1.05;
}
.hero__headline .grad-text {
  font-size: clamp(64px, 5.2vw,84px);
  line-height: 1.14;
  margin-top: 2px;
}
.section__grad-text, .section__grad-text em {
  font-size: clamp(36px, 3.5vw, 34px);
  letter-spacing: -0.018em;
  line-height: 1.12;
}

/* -- 3. One dark section: stats as a true full-bleed band -- */

.stats__row {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.stat__num { font-size: 58px; }

/* -- 4. shadow audit: chips and flags go flat too -- */

.demo__frame-content-1, .demo__frame-content-3 { box-shadow: 0 1px 4px rgba(20,26,36,.10); }

/* -- 6. furniture: caps only on kickers; one icon scale; one radius scale -- */
.offer-card__label { text-transform: none; font-weight: 600; letter-spacing: .02em; }
.footer__col h4 { text-transform: none; letter-spacing: .02em; font-size: 13px; color: #7A8090; }
.ticklist li svg { width: 20px; height: 20px; stroke-width: 1.8; }
.badge--act svg { width: 20px; height: 20px; stroke-width: 1.8; }
.offer-card, .plan-card, .modal__card { border-radius: var(--radius); }
.demo__frame { border-radius: var(--radius-lg); overflow: hidden; }

/* -- 7. states: nav + topbar links get the offset underline -- */
.nav__links a:hover, .topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--teal);
}
.nav__panel a:hover { text-decoration: none; }

/* -- 5. photo grade: CSS layer kept light; the teal-shadow split-tone
      is baked into the graded image set (see build) -- */
.hero-bg img,
.audience-tiles li img,
.audience-card img,
.trust-banner__faces img,
.demo__frame-content-3 img {
  filter: saturate(.92) contrast(1.02);
}

/* -- round 3 follow-up: voices photo card backdrop goes teal -- */
.voice-card--img { background-color: #CDE9E5; }

/* ============================================================
   De-template pass (Oct 2026): editorial How-it-works split,
   browser chrome on the hero mock, last indigo accents retired.
   ============================================================ */

/* -- How it works: one asymmetric, editorial section -- */
.how .container { display: grid; grid-template-columns: 360px 1fr; gap: 72px; align-items: start; }
.how .section__header { text-align: left; margin: 0; position: sticky; top: 150px; }
.how .section__header .section__sub { margin-left: 0; text-align: left; }
.how .timeline {
  max-width: none; margin: 0; padding: 8px 0 8px 4px;
  background: transparent; border: 0; box-shadow: none;
  backdrop-filter: none; text-align: left;
}
.how .timeline::after { display: none; }
.how .timeline::before {
  left: 28px; transform: none; top: 8px; bottom: 40px;
  width: 1px; background: var(--border);
}
.how .timeline__step { grid-template-columns: 48px 1fr; gap: 26px; padding-bottom: 46px; }
.how .timeline__num {
  grid-column: 1; 
  width: 48px; 
  height: 48px;
  background: var(--teal); 
  background-color: #97cbff;
  background-color: #6f93e0;
  box-shadow: none; 
  font-size: 16px; 
  font-weight: 600;
}
.how .timeline__step:nth-child(odd) .timeline__content,
.how .timeline__step:nth-child(even) .timeline__content {
  grid-column: 2; justify-self: start; text-align: left; max-width: 560px;
}
@media (max-width: 1000px) {
  .how .container { grid-template-columns: 1fr; gap: 40px; }
  .how .section__header { position: static; }
}


/* -- problem section: one-line bridge to the product -- */
.problem__bridge {
  max-width: 780px;
  margin: 44px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}
.problem__bridge b { 
  color: var(--teal-text); 
  font-weight: 800;

}

/* -- problem bridge: centred statement -- */
.problem .problem__bridge {
  max-width: none;
  margin: 72px auto 8px;
  text-align: center;
  /* font-family: "merriweather", serif; */
  font-family: "fira-sans", sans-serif;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

/* ============================================================
   Responsive pass (Oct 2026): tablet (≤1024px) and mobile (≤767px).
   Desktop (>1024px) is final; every rule below lives inside a
   max-width query so it never reaches the desktop layout.
   The burger toggle and in-menu CTA are hidden on desktop.
   ============================================================ */
.nav__toggle { display: none; }
.nav__links .nav__menu-cta { display: none; }

/* ---------- Tablet and down ---------- */
@media (max-width: 1024px) {

  /* -- Nav: burger menu replaces the inline links -- */
  .nav__inner { gap: 1rem; padding: 1rem 24px; }
  .nav.is-scrolled .nav__inner { padding: 0.75rem 24px; }
  .nav__inner > div:last-of-type { margin-left: auto; }
  .nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; flex-shrink: 0;
    background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  }
  .nav__toggle span {
    display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav .nav__inner .nav__links { display: none; }
  .nav.is-open .nav__inner .nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: 8px 20px 20px;
    border-top: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(35,40,70,.12);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .nav.is-open .nav__links a {
    display: block; padding: 14px 4px; margin: 0; font-size: 16px;
    border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  }
  .nav.is-open .nav__links a:hover { text-decoration: none; color: var(--teal); }
  .nav.is-open .nav__drop { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav.is-open .nav__drop > a { display: none; }
  .nav.is-open .nav__inner .nav__panel {
    display: flex; position: static; padding: 0; min-width: 0;
  }
  .nav.is-open .nav__panel::before { display: none; }
  .nav.is-open .nav__panel a:hover { background: none; color: var(--teal); }
  .nav.is-open .nav__links .nav__menu-cta {
    display: inline-flex; margin-top: 18px; padding: 13px 18px;
    border: 0; border-radius: 8px; color: #fff; justify-content: center;
  }
  .nav.is-open .nav__links .nav__menu-cta:hover { color: #fff; }

  /* -- Hero: stack copy over the product video -- */
  .hero-bg { top: 0; }
  .hero-bg img { height: 100vh; min-height: 0; object-fit: cover; object-position: 72% center; }
  .hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.5) 100%);
  }
  .hero__inner {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 160px 24px 56px; gap: 0;
  }
  .hero__headline { font-size: 52px; max-width: 700px; }
  .hero__headline .grad-text { font-size: 62px; }
  .hero__sub { max-width: 640px; padding-right: 0; }
  .hero__mock {
    margin: 32px auto 0; width: 100%; max-width: 640px;
  }
  .scroll-content > div { display: block !important; }
  #herodemoVideo { width: 100% !important; height: auto !important; display: block; }
  .hero__actions {
    position: static; justify-content: center; margin-top: 24px;
  }

  /* -- Designed-for strip -- */
  .hero__designed-for { padding: 4rem 0 4.5rem; }

  /* -- Problem -- */
  .problem__grid { gap: 1.5rem; max-width: 680px; margin: 0 auto; }

  /* -- Stats: restore the container gutter the desktop rule zeroes -- */
  .stats__row { padding: 0 24px; }

  /* -- Section rhythm -- */
  .section { padding: 80px 0; }
  .section.voices { padding: 88px 0; }
  .pricing { padding: 88px 0 72px; }
  .section__header { margin-bottom: 44px; }

  /* -- Solution: cards stack -- */
  .solution__cards { flex-direction: column; max-width: 680px; }
  .audience-card { padding-right: 32px; }

  /* -- How it works -- */
  .how .container { gap: 32px; }

  /* -- Footer -- */
  .footer__grid { gap: 32px; }
}

/* ---------- Tablet only (768–1024) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .stats__row { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .stat + .stat::before { display: block; }
  .stat__num { font-size: 42px; }
  .stat__label { font-size: 13px; }

  .voices__grid { grid-template-columns: repeat(2, 1fr); }
  .voice-card--img { min-height: 320px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .container { padding: 0 20px; }

  /* -- Topbar + nav -- */
  .topbar__left { display: none; }
  .topbar__inner { justify-content: flex-end; }
  .topbar__right { gap: 16px; font-size: 12px; }
  .nav__inner { height: 64px; padding: 0.5rem 20px; }
  .nav__logo, .nav.is-scrolled .nav__logo { height: 34px; }
  .nav__inner > div:last-of-type { display: none; } /* header CTA moves into the menu */
  .nav__toggle { margin-left: auto; }
  .nav.is-scrolled .nav__inner { padding: 0.5rem 20px; }

  /* -- Hero -- */
  .hero__inner { padding: 128px 20px 48px; }
  .hero__headline { font-size: 38px; line-height: 1.08; }
  .hero__headline .grad-text { font-size: 44px; margin-top: 4px; }
  .hero__sub { font-size: 1.02rem; margin: 18px 0 22px; padding: 0; }
  .hero__badges { width: 100%; gap: 0.6rem; margin-bottom: 0; }
  .badge, .badge--outline { font-size: 14px; padding: 9px 18px !important; white-space: normal; }
  .hero__mock { margin-top: 28px; }
  .scroll-box__inner { padding: 6px; }
  #heroMuteButton { width: 36px !important; height: 36px !important; right: 10px !important; bottom: 10px !important; }
  .hero__actions { margin-top: 20px; }
  .hero__actions .btn { width: 100%; padding: 15px 20px; }

  /* -- Section scaffolding -- */
  .section { padding: 64px 0; }
  .section.voices { padding: 64px 0; }
  .section__header { margin-bottom: 32px; }
  .section__grad-text, .section__grad-text em { font-size: 28px; line-height: 1.18; margin-bottom: 1rem; }
  .section__sub { font-size: 1rem; margin: 1rem auto; letter-spacing: 0.2px; }

  /* -- Designed-for strip -- */
  .hero__designed-for { padding: 3.5rem 0 3.5rem; }
  .strip-headline { margin-bottom: 1.5rem; }
  .hero__designed-for ul.audience-tiles { gap: 20px; }
  .audience-tiles li img { height: 200px; }
  .audience-tiles li p { padding: 0 1.25rem; font-size: 15px; }
  .audience-tiles li .btn { white-space: normal; text-align: center; margin: 6px 1.25rem 0; }

  /* -- Problem -- */
  .problem .section__header { margin-bottom: 32px; }
  .problem__grid { gap: 1rem; }
  .problem__card { padding: 28px 24px; gap: 14px; }
  .problem__num { font-size: 52px; }
  .problem .problem__bridge { margin: 44px auto 0; font-size: 24px; }

  /* -- Stats -- */
  .stats { padding: 56px 0; }
  .stats__row { gap: 36px; padding: 0 20px; }
  .stat__num { font-size: 44px; }

  /* -- Solution -- */
  .audience-card { flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
  .audience-card-img { border-radius: 12px 12px 0 0; }
  .audience-card img {
    width: 100%; height: 220px; border: 0;
    border-radius: 12px 12px 0 0;
  }
  .audience-card__body { padding: 22px 22px 26px; }
  .audience-card__label { font-size: 16px; margin-bottom: 10px; }

  /* -- Demo -- */
  .demo__frame-main, .demo__frame { border-radius: 14px; }
  .demo__play { top: calc((100vw - 40px) * 9 / 32); /* centre of the 16:9 video, not the thumbs row */ gap: 7px; padding: 9px 18px 9px 14px; font-size: 15px; }
  .demo__play svg { width: 22px; height: 22px; }


  /* -- How it works -- */
  .how .timeline__step { grid-template-columns: 40px 1fr; gap: 18px; padding-bottom: 34px; }
  .how .timeline__num { width: 40px; height: 40px; font-size: 14px; }
  .how .timeline::before { left: 24px; }
  .timeline__content h3 { font-size: 17px; }
  .timeline__content p { font-size: 14.5px; }

  /* -- Voices -- */
  .voices__grid { gap: 16px; }
  .voice-card { padding: 28px 22px; }
  .voice-card--img { min-height: 260px; background-position: center 20%; }

  /* -- Pricing -- */
  .pricing { padding: 64px 0 56px; }
  .offer-card { padding: 28px 20px 26px; }
  .offer-card__flag {
    position: static; display: table; margin: 0 auto 16px; padding: 8px 16px; font-size: 12.5px;
  }
  .offer-card__price b { font-size: 52px; }
  .offer-card__price span { margin-left: 0; margin-top: 6px; }
  .offer-card .ticklist li { align-items: flex-start; }
  .offer-card button { width: 100%; padding: 14px 16px; white-space: normal; text-align: center; }
  .offer-card__spots { margin: 2rem 0 0; font-size: 13px; }
  .pricing__smallprint { margin-top: 2rem; }

  /* -- CTA banner -- */
  .cta-banner__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-banner__actions .btn { width: 100%; padding: 15px 20px; }

  /* -- Footer -- */
  .footer { padding-top: 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 8px 20px 20px; }
  .footer__brandcol { grid-column: 1 / -1; }
  .footer__legalrow { padding: 18px 20px 0; }
  .footer__legal { text-align: center; }

  /* -- Trust banner -- */
  .trust-banner__inner { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .trust-banner__faces img { width: 34px; height: 34px; }
  .trust-banner__faces img + img { margin-left: -10px; }
  .trust-banner__text b { font-size: 13px; line-height: 1.35; }

  /* -- Plans modal -- */
  .modal { padding: 16px 12px; }
  .modal__panel { border-radius: 16px; }
  .modal__panel h2 { font-size: 24px; padding-right: 36px; }
  .modal__close { top: 14px; right: 14px; }
  .modal__panel > .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  .topbar__login { display: none; }
  .hero__headline { font-size: 34px; }
  .hero__headline .grad-text { font-size: 39px; }
  .section__grad-text, .section__grad-text em { font-size: 26px; }
  .offer-card__price b { font-size: 46px; }
  .stat__num { font-size: 40px; }
}

/* -- Topbar links: white at rest, soft light blue on hover. The shared
      hover colour (--teal-text) matches the topbar's navy background,
      which made these links disappear on hover. -- */
.topbar a,
.topbar__login { color: #ffffff; }
.topbar a:hover,
.topbar a:focus-visible {
  color: #AFC4FF;
  text-decoration-color: #AFC4FF;
}
.topbar a:focus-visible { outline-color: #ffffff; }

/* ============================================================
   BRAND STRIP: scrolling nextmedia brand logos (top of CTA banner)
   ============================================================ */
.brand-strip {
  background: #ffffff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 0 40px;
  overflow: hidden;
}
.brand-strip__title {
  margin: 0 0 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.brand-strip__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-strip__track {
  display: flex;
  width: max-content;
  animation: brandStripScroll 50s linear infinite;
  will-change: transform;
}
.brand-strip__marquee:hover .brand-strip__track { animation-play-state: paused; }
.brand-strip__list {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 0 28px;
  margin: 0;
  list-style: none;
}
.brand-strip__logo { display: flex; align-items: center; flex: none; }
.brand-strip__logo a {
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.brand-strip__logo a:focus-visible { outline: 2px solid #4F6FEA; outline-offset: 6px; }
.brand-strip__logo img {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .3s ease, opacity .3s ease;
}
.brand-strip__logo a:hover img,
.brand-strip__logo a:focus-visible img { filter: none; opacity: 1; }
/* frankie logo is white-on-transparent: show it in black so it reads on white */
.brand-strip__logo--white img { filter: brightness(0); opacity: .45; }
.brand-strip__logo--white a:hover img,
.brand-strip__logo--white a:focus-visible img { filter: brightness(0); opacity: 1; }

@keyframes brandStripScroll { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .brand-strip__list { gap: 36px; padding: 0 18px; }
  .brand-strip__logo img { height: 26px; }
}
/* Keep the strip scrolling even when the OS asks to reduce motion (e.g. Windows
   "Animation effects" off); it is slow and pauses on hover, so it still runs. */

/* Brand strip sits flush at the top of the CTA banner, full width on white */
.section.cta-banner { padding-top: 0; }
.cta-banner .brand-strip {
  margin: 0 0 110px;
  border-top: 0;
  text-align: left;
}
@media (max-width: 767px) {
  .cta-banner .brand-strip { margin-bottom: 56px; }
}

/* ---- Brand bar: scrolling nextmedia logos ----
   Hidden at the top (the navy utility topbar shows instead). Once the page
   is scrolled it slides down above the fixed nav, and slides back up as the
   big brand strip in the CTA banner comes into view. Toggled by
   body.brandbar-on in main.js. */
:root { --brandbar-h: 40px; }
.brandbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 51;
  height: var(--brandbar-h);
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s ease, opacity .45s ease, visibility 0s linear .45s;
}
.brandbar-on .brandbar {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform .45s ease, opacity .45s ease, visibility 0s;
}
.brandbar-on .nav.is-scrolled { margin-top: var(--brandbar-h); }

.brandbar__inner { display: flex; align-items: center; gap: 20px; height: 100%; }
.brandbar__label {
  flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.brandbar__marquee { flex: 1; min-width: 0; }
.brandbar .brand-strip__track { animation-duration: 60s; }
.brandbar .brand-strip__list { gap: 40px; padding: 0 20px; }
.brandbar .brand-strip__logo img { height: 20px; max-width: 104px; }

@media (max-width: 767px) {
  :root { --brandbar-h: 34px; }
  .brandbar__label { display: none; }
  .brandbar .brand-strip__list { gap: 26px; padding: 0 13px; }
  .brandbar .brand-strip__logo img { height: 16px; max-width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .brandbar, .brandbar-on .brandbar { transition: opacity .2s ease, visibility 0s; transform: none; }
}

/* ============================================================
   CONTACT: details left, form card right (tinted band, before footer)
   ============================================================ */
.section.contact {
  background: #ffffff;
  padding: 100px 0;
  scroll-margin-top: 60px; /* clear the fixed nav when jumping to #contact */
}
.contact__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1160px;
}
.contact__side { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; min-width: 0; }
.contact__header { text-align: left; margin: 0; max-width: none; }

.contact__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  background: #EEF2FF;
  color: var(--teal);
  display: grid; place-items: center;
}

/* Two next-step tiles: book a call, or send a message (filled, the main action) */
.contact__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.contact__tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 20px; min-width: 0;
  font: inherit; text-align: left; text-decoration: none;
  color: var(--ink); background: #ffffff;
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.contact__tile .contact__icon { margin-bottom: 10px; }
.contact__tile b { font-size: 16px; line-height: 1.35; }
.contact__tile > span:last-child { font-size: 14px; color: var(--muted); }
.contact__tile:hover { border-color: var(--teal); transform: translateY(-2px); }
.contact__tile:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.contact__ext { color: var(--teal); }
.contact__tile--main { background: var(--teal); border-color: var(--teal); color: #ffffff; }
.contact__tile--main .contact__icon { background: rgba(255, 255, 255, .18); color: #ffffff; }
.contact__tile--main > span:last-child { color: #DDE1FF; }
.contact__tile--main:hover { background: var(--teal-text); border-color: var(--teal-text); }

/* Email + hours, quietly under the tiles */
.contact__email {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 15px; color: var(--muted);
}
.contact__email-icon {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  background: #EEF2FF; color: var(--teal);
}
.contact__email a {
  color: var(--ink); font-weight: 600; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: #C9D1FB; text-underline-offset: 3px;
}
.contact__email a:hover, .contact__email a:focus-visible { color: var(--teal); text-decoration-color: var(--teal); }
.contact__hours { flex-basis: 100%; padding-left: 40px; font-size: 13.5px; color: var(--faint); }

/* Form card (same card language as the founding-offer card) */
.contact__card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* box-shadow: 0 3px 18px rgba(35, 40, 70, .16), 0 2px 6px rgba(35, 40, 70, .04); */
  padding: 36px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.contact__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact__field--full { grid-column: 1 / -1; }
.contact__field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.contact__input {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact__input::placeholder { color: var(--faint); }
.contact__input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(65, 80, 238, .14); }
.contact__input[aria-invalid="true"] { border-color: var(--red); }
select.contact__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6172' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
textarea.contact__input { resize: vertical; min-height: 110px; }
.contact__check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
.contact__check input { margin-top: 3px; accent-color: var(--teal); }
.contact__status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  background: #ECFDF3; border: 1px solid #BBF7D0; color: #166534;
}
.contact__status.is-error { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.contact__fine { margin: 0; font-size: 12.5px; color: var(--faint); }
.contact__fine a { color: var(--teal); }

/* Photo of Arek in the right-hand column */
.contact__person {
  margin: 0;
  position: relative;
  max-width: 390px;
  justify-self: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.contact__person img { display: block; width: 100%; height: auto; }
.contact__person figcaption {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .92);
  border-radius: 12px;
}
.contact__person figcaption b { font-size: 16px; color: var(--ink); }
.contact__person figcaption span { font-size: 14px; color: var(--muted); }

/* Contact form popup (reuses the plans modal shell) */
.contact-modal__panel { max-width: 640px; }
.contact-modal__title { margin: 0 0 4px; font-size: 26px; padding-right: 48px; }
.contact-modal__sub { margin: 0 0 24px; color: var(--muted); font-size: 15px; }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__side { padding-top: 0; }
  .contact__person { max-width: 360px; }
}
@media (max-width: 767px) {
  .section.contact { padding: 64px 0; }
  .contact__card { padding: 28px 20px; }
  .contact-modal__panel { padding: 32px 20px; }
  .contact__fields { grid-template-columns: 1fr; }
}

/* ---- Back to top button ----
   Fades in after scrolling; lifts above the sticky trust banner when it shows. */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(35, 40, 70, .18);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .25s ease, bottom .4s ease-in-out;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--teal-text); transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid rgba(65, 80, 238, .45); outline-offset: 3px; }
body.has-trust-banner .to-top { bottom: 93px; }

@media (max-width: 767px) {
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  body.has-trust-banner .to-top { bottom: 86px; }
}
/* @media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .2s ease; transform: none; }
} */

/* ---- Powered by: dark band at the bottom of the hero image ----
   Logos are shown in white on the dark band; full opacity on hover. */
.powered-by {
  position: relative;
  z-index: 1;
  background: #141A24;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.powered-by__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 36px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.powered-by__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.powered-by__logos {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0 0 0 36px;
  list-style: none;
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.powered-by__logos a { display: flex; align-items: center; border-radius: 6px; }
.powered-by__logos img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .8;
  transition: opacity .25s ease;
}
.powered-by__logos a:hover img,
.powered-by__logos a:focus-visible img { opacity: 1; }
.powered-by__logos a:focus-visible { outline: 2px solid #ffffff; outline-offset: 6px; }

@media (max-width: 560px) {
  .powered-by__inner { flex-direction: column; gap: 12px; }
  .powered-by__logos { border-left: 0; padding-left: 0; gap: 32px; }
  .powered-by__logos img { height: 28px; }
}

/* ============================================================
   POWERED BY placements (testing several at once)
   Each placement has .pb-variant + data-pb="key"; the test panel
   adds body.pb-off-<key> to hide one. Logos link to the brand sites.
   ============================================================ */
.pb-kick { margin-bottom: -2px; font-size: 10.5px; line-height: 1.5; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.pb-logos { display: inline-flex; align-items: center; gap: 16px; }
.pb-logos a { display: flex; align-items: center; border-radius: 4px; }
.pb-logos img { display: block; width: auto; transition: filter .25s ease, opacity .25s ease; }
.pb-logos a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* 10: in the top bar, after the tagline (white logos on navy) */
.topbar__left { display: inline-flex; align-items: center; }
.pb-topbar { display: inline-flex; align-items: center; gap: 12px; margin-left: 14px; }
.pb-topbar__sep { opacity: .4; }
.pb-topbar .pb-kick { color: rgba(255, 255, 255, .7); }
.pb-topbar .pb-logos img { height: 14px; filter: brightness(0) invert(1); opacity: .85; }
.pb-topbar .pb-logos a:hover img { opacity: 1; }

/* 11: slim dark bar under the top bar */
.pb-subbar { background: #141A24; color: rgba(255, 255, 255, .6); }
.pb-subbar__inner { display: flex; justify-content: flex-end; align-items: center; gap: 14px; height: 28px; }
.pb-subbar .pb-logos img { height: 14px; filter: brightness(0) invert(1); opacity: .8; }
.pb-subbar .pb-logos a:hover img { opacity: 1; }
/* body:not(.pb-off-subbar) .nav:not(.is-scrolled) { margin-top: calc(2.1rem + 28px); } */

/* 13: lockup beside the ManagerAlly logo (true colour) */
.nav__brandgroup { gap: 16px !important; }
.pb-lockup {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4px !important;
  padding-left: 16px;
  border-left: 1px solid var(--border);
  color: var(--faint);
}
.pb-lockup .pb-kick { font-size: 9px; }
.pb-lockup .pb-logos { gap: 12px; }
.pb-lockup .pb-logos img { height: 15px; }

/* 14: pill above the headline */
.pb-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 9px 25px 8.5px 30px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(35, 40, 70, .08);
  color: var(--muted);
  line-height: 1;
}
.pb-pill .pb-logos { gap: 12px; }
.pb-pill .pb-logos img { height: 19px; }

/* 3 + 15: on the hero image */
.hero__inner { position: relative; }
.pb-glass, .pb-corner {
  position: absolute;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 14px;
  padding: 10px 18px;
}
.pb-glass {
  left: 24px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 8px 24px rgba(35, 40, 70, .12);
  color: var(--muted);
}
.pb-glass .pb-logos img { height: 22px; }
.pb-corner {
  right: 24px;
  background: rgba(20, 26, 36, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .7);
  border-radius: 12px;
  padding: 9px 16px;
  gap: 14px;
}
.pb-corner .pb-logos img { height: 16px; filter: brightness(0) invert(1); opacity: .85; }
.pb-corner .pb-logos a:hover img { opacity: 1; }

/* 20: editorial credit line */
.pb-editorial { position: relative; z-index: 1; background: #F5F7FF; padding: 40px 0; text-align: center; }
.pb-editorial__line { 
  /* font-family: "merriweather", serif;  */
  font-size: 19px; 
  /* color: var(--ink);  */
  margin: 0 0 21px; 
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  color: #737373;
  font-family: "noto-sans-semicondensed", sans-serif;
}
.pb-editorial__line b { font-style: normal; }
.pb-editorial__rule { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pb-editorial__rule::before, .pb-editorial__rule::after { content: ""; height: 1px; flex: 0 1 120px; background: var(--border); }
.pb-editorial .pb-logos { gap: 32px; }
.pb-editorial .pb-logos img { height: 30px; filter: grayscale(1); opacity: .7; }
.pb-editorial .pb-logos a:hover img { filter: none; opacity: 1; }

/* 18: footer legal row */
.footer__legalrow { flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.pb-legal { display: inline-flex; align-items: center; gap: 12px; color: var(--faint); }
.pb-legal .pb-logos img { height: 16px; filter: grayscale(1); opacity: .7; }
.pb-legal .pb-logos a:hover img { filter: none; opacity: 1; }

/* hide a placement when it is switched off in the test panel */
.pb-off-band [data-pb="band"], .pb-off-glass [data-pb="glass"], .pb-off-topbar [data-pb="topbar"],
.pb-off-subbar [data-pb="subbar"], .pb-off-lockup [data-pb="lockup"], .pb-off-pill [data-pb="pill"],
.pb-off-corner [data-pb="corner"], .pb-off-legal [data-pb="legal"], .pb-off-editorial [data-pb="editorial"] { display: none !important; }

@media (max-width: 1024px) {
  .pb-lockup { display: none !important; } /* no room beside the logo with the burger menu */
}
@media (max-width: 767px) {
  .pb-glass { left: 20px; right: 20px; bottom: 12px; justify-content: center; }
  .pb-corner { display: none !important; } /* would sit on top of the glass tag */
  .pb-subbar__inner { justify-content: center; }
  .pb-editorial__line { font-size: 12px; letter-spacing: .12em; margin-bottom: 16px; }
  .pb-editorial { padding: 32px 0; }
  .pb-editorial .pb-logos { gap: 24px; }
  .pb-editorial .pb-logos img { height: 26px; }
  .pb-pill { padding: 8px 18px; gap: 10px; max-width: 100%; }
  .pb-pill .pb-logos { gap: 10px; }
  .pb-pill .pb-logos img { height: 17px; }

  .pb-editorial__rule::before, .pb-editorial__rule::after { content: "";flex: 0 1 20px; }
}

/* ---- Powered by TEST PANEL (remove before launch) ---- */
.pb-test { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; font-size: 13px; }
.pb-test__toggle {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: #141A24;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.pb-test__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 280px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pb-test__panel[hidden] { display: none; }
.pb-test__panel h4 { margin: 0 0 6px; font-size: 13px; }
.pb-test__panel label { display: flex; gap: 10px; align-items: center; padding: 5px 4px; border-radius: 6px; cursor: pointer; }
.pb-test__panel label:hover { background: #F5F7FF; }
.pb-test__panel input { accent-color: var(--teal); }
.pb-test__panel b { font-variant-numeric: tabular-nums; min-width: 22px; color: var(--faint); font-weight: 600; }
.pb-test__actions { display: flex; gap: 8px; margin-top: 8px; }
.pb-test__actions button { flex: 1; font: inherit; font-size: 12px; cursor: pointer; background: #F5F7FF; border: 1px solid var(--border); border-radius: 8px; padding: 7px; color: var(--ink); }

/* ---- Powered by logos in #97CBFF, true colour on hover ----
   The image is shifted out of its link (which clips it) and a drop-shadow
   of it is cast back into place. A drop-shadow is always a solid silhouette
   in its own colour, so the logo shows in exactly #97CBFF. Hover removes
   the shift and the shadow to show the real logo. */
.pb-tint { overflow: hidden; }
.pb-logos .pb-tint img {
  opacity: 1;
  transform: translateX(-600px);
  /* filter: drop-shadow(600px 0 0 #97CBFF);
  filter: drop-shadow(600px 0 0 #86a4c1);
    filter: drop-shadow(600px 0 0 #639bd0);
    filter: drop-shadow(600px 0 0 #86aed5);
    filter: drop-shadow(600px 0 0 #4150ee);
    filter: drop-shadow(600px 0 0 #82c0ff); */
    /* filter: drop-shadow(600px 0 0 #6f93e0); */
    filter: drop-shadow(600px 0 0 #032A80);
  transition: none; /* animating the shift would flash the logo away */
}
.pb-logos .pb-tint:hover img,
.pb-logos .pb-tint:focus-visible img {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Very small phones (320–380px): let the pill wrap instead of overflowing */
@media (max-width: 380px) {
  .pb-pill { flex-wrap: wrap; justify-content: center; border-radius: 16px; row-gap: 6px; }
  .pb-pill .pb-logos img { height: 15px; }
}