/* ============================================================================
   CommTrak CRM — site stylesheet
   Hand-written, no framework, no build step. One file, one request.
   ----------------------------------------------------------------------------
   1. Fonts        5. Layout        9. Feature grid    13. Forms
   2. Tokens       6. Buttons      10. Steps           14. Tables
   3. Reset        7. Header       11. Testimonial     15. Footer
   4. Typography   8. Hero         12. Logo wall       16. Utilities / motion
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/lato-900.woff2') format('woff2');
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  /* brand */
  --blue-900: #0D1F3C;
  --blue-800: #122C55;
  --blue-700: #1A4079;
  --blue-600: #2D62AE;   /* CommTrak brand blue (from the logo) */
  --blue-500: #3F7CD8;
  --blue-200: #BBD2F0;
  --blue-100: #E2EDFB;
  --blue-50:  #F1F6FD;

  --orange-600: #D64A00;
  --orange-500: #EA5200;
  --orange-100: #FFE4D5;
  --orange-50:  #FFF4ED;

  /* neutrals */
  --ink:    #13203A;
  --body:   #4B5768;
  --muted:  #79859A;
  --line:   #E3E9F1;
  --line-2: #F0F3F8;
  --white:  #FFFFFF;
  --tint:   #F7F9FC;

  /* type */
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* shape */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* elevation */
  --sh:    0 4px 12px -2px rgba(19, 32, 58, .08), 0 2px 6px -2px rgba(19, 32, 58, .05);
  --sh-md: 0 12px 28px -8px rgba(19, 32, 58, .14), 0 4px 10px -4px rgba(19, 32, 58, .06);
  --sh-lg: 0 28px 60px -20px rgba(19, 32, 58, .26), 0 10px 24px -12px rgba(19, 32, 58, .1);

  /* layout */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 8vw, 7rem);
  --header-h: 76px;

  /* text and lines over the dark/gradient sections */
  --on-dark:       rgba(255, 255, 255, .82);
  --on-dark-muted: rgba(255, 255, 255, .62);
  --on-dark-soft:  rgba(255, 255, 255, .80);
  --on-dark-line:  rgba(255, 255, 255, .14);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* 3. Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue-900); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* 4. Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.033em;
}
h1, .h1 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); }
h2, .h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing: -.015em; }
h4, .h4 { font-size: 1.125rem; letter-spacing: -.01em; }

p { text-wrap: pretty; }
p + p { margin-top: 1.05em; }

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.65;
  color: var(--body);
}

.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: .875rem;
}
.eyebrow--light { color: var(--blue-200); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1rem; }

/* tick list */
.ticks { display: grid; gap: .75rem; margin-top: 1.5rem; }
.ticks li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink);
  font-weight: 700;
}
.ticks li::before {
  content: '';
  position: absolute; left: 0; top: .45em;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232D62AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / .8rem no-repeat;
}

/* 5. Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
/* short prose blocks — full padding on both sides leaves too big a gap */
.section--prose { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }
.section--tint { background: var(--tint); }
.section--dark {
  background: linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 55%, var(--blue-700) 120%);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: var(--on-dark-soft); }
.section + .section--tint, .section--tint + .section { border-top: 1px solid var(--line-2); }

/* Repeated content blocks within one section. Separate <section>s would double
   their vertical padding and leave a hole between each block. */
.feature-group + .feature-group { margin-top: clamp(3rem, 6vw, 4.5rem); }
.feature-group .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.25rem); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 1fr; }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* 6. Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 900;
  letter-spacing: .005em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1em; height: 1em; flex: none; }

.btn--primary {
  background: var(--orange-500); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(234, 82, 0, .5);
}
.btn--primary:hover { background: var(--orange-600); color: #fff; box-shadow: 0 10px 22px -8px rgba(234, 82, 0, .55); }

.btn--blue { background: var(--blue-600); color: #fff; box-shadow: 0 6px 16px -6px rgba(45, 98, 174, .45); }
.btn--blue:hover { background: var(--blue-700); color: #fff; }

.btn--outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--blue-600); color: var(--blue-600); background: var(--blue-50); }

.btn--ghost-light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); color: #fff; }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); color: #fff; }


.btn--lg { padding: 1rem 1.875rem; font-size: 1rem; }
.btn--sm { padding: .5625rem 1rem; font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }
.btn-row.center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 900; font-size: .9375rem; color: var(--blue-600);
}
.link-arrow::after {
  content: '→';
  transition: transform .18s var(--ease);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* 7. Header --------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 2rem;
}
.header__logo { flex: none; display: block; }
.header__logo img { width: 196px; }
@media (max-width: 560px) { .header__logo img { width: 168px; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; }
.nav__list a {
  display: block;
  padding: .5rem .875rem;
  border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 700;
  color: var(--ink);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav__list a:hover { background: var(--blue-50); color: var(--blue-600); }
.nav__list a[aria-current="page"] { color: var(--blue-600); background: var(--blue-50); }

/* the in-menu demo button only exists for the mobile drawer */
.nav__cta-mobile { display: none; }

.header__cta { flex: none; display: flex; align-items: center; gap: .625rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.nav-toggle span {
  display: block; position: relative;
  width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: background-color .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0;
  width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .22s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; margin-left: auto; }
  .header__cta .btn--demo-desktop { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .75rem var(--gutter) 1.25rem;
  }
  .nav__list a { padding: .875rem .5rem; border-radius: 0; border-bottom: 1px solid var(--line-2); }
  .nav__cta-mobile { display: block; margin-top: 1rem; }
  .nav__cta-mobile a { border-bottom: 0; }
  .nav__cta-mobile .btn { width: 100%; padding: .875rem 1.5rem; }
}

/* 8. Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(155deg, var(--blue-900) 0%, var(--blue-800) 45%, var(--blue-700) 100%);
  color: rgba(255, 255, 255, .84);
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
}
.hero::before {
  content: '';
  position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(ellipse at 30% 0%, rgba(63, 124, 216, .38), transparent 62%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { color: #fff; }
.hero__inner { max-width: 46rem; }
.hero__inner.center { margin-inline: auto; text-align: center; }
.hero p.lead { color: var(--on-dark-soft); margin-top: 1.25rem; }
.hero .btn-row { margin-top: 2rem; }

.hero__accent { color: var(--blue-200); }

.hero__note {
  margin-top: 1.5rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
}

/* Split hero: copy left, product shot right, both above the fold.
   The shot is allowed to run past the container toward the screen edge — that
   keeps the app at a believable aspect ratio instead of squashing it into half
   a column. `overflow:hidden` on .hero stops it causing sideways scroll. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero__grid .hero__inner { max-width: none; }

/* min-width:0 matters: as a grid item this defaults to min-width:auto, which
   refuses to shrink below the min-content width of the nowrap tab row — on a
   phone that pushed the shot to 508px inside a 375px screen and the right-hand
   side was silently clipped. */
.hero__shot { margin: 0; min-width: 0; }

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 3rem); }
  .hero__shot { max-width: 720px; margin-inline: auto; width: 100%; }
}

/* Proof strip below both columns. */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--on-dark-line);
}
.hero__stats li { display: grid; gap: .25rem; }
.hero__stats strong {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: #fff;
}
.hero__stats span { font-size: .9375rem; color: var(--on-dark-muted); line-height: 1.45; }
@media (max-width: 760px) { .hero__stats { grid-template-columns: repeat(2, 1fr); } }

/* compact hero for inner pages */
.hero--page { padding-block: clamp(3rem, 6vw, 4.75rem); }
.hero--page .hero__inner { max-width: 44rem; }

/* 9. Cards / feature grid -------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--blue-200);
}
.card h3 { margin-bottom: .5rem; }
/* cards are often wrapped in <a>, so text must not inherit the link colour */
.card p, .card li { font-size: 1rem; color: var(--body); }
.card .link-arrow { margin-top: auto; padding-top: 1.25rem; }

.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--blue-100);
  color: var(--blue-600);
  margin-bottom: 1.125rem;
}
.card__icon svg { width: 22px; height: 22px; }


/* pricing plan cards */
.plans { align-items: stretch; }
.plans .card { position: relative; }
.card--featured {
  border-color: var(--blue-500);
  box-shadow: var(--sh-md);
}
.plan__tag {
  position: absolute; top: -.75rem; left: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--blue-600); color: #fff;
  font-size: .6875rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  padding: .3125rem .625rem; border-radius: 999px;
}
.plan__line { font-weight: 900; color: var(--ink) !important; margin-bottom: .75rem; }
.plan__best {
  margin-top: auto; padding-top: 1rem;
  font-size: .875rem !important; color: var(--muted) !important;
}
.plan__best strong { color: var(--ink); }
.plans .btn { align-self: flex-start; }

/* integration cards */
.integration { align-items: flex-start; gap: 0; }
.integration__logo {
  height: 40px; width: auto; max-width: 132px;
  object-fit: contain; object-position: left center;
  margin-bottom: 1.125rem;
}
/* Same aspect-ratio buckets as the logo wall. The box stays 40px tall so
   every card title lines up; wider wordmarks shrink inside it via padding. */
.integration__logo.logo--wide   { padding-block: 5px; }
.integration__logo.logo--wider  { padding-block: 7px; }
.integration__logo.logo--widest { padding-block: 9px; max-width: 124px; }
/* stand-in for an integration whose logo we do not have yet */
.integration__wordmark {
  display: flex; align-items: center;
  font-weight: 900; font-size: 1.25rem; letter-spacing: -.02em;
  color: var(--blue-700);
}
.integration h3 { margin-bottom: .125rem; }
.integration__cat {
  font-size: .8125rem !important; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted) !important;
}

/* 10. Steps --------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 1.875rem);
}
/* stacked variant: number above the text, for 3/4-across step rows */
.steps--stacked .step { grid-template-columns: 1fr; align-content: start; gap: 1rem; }

.step__num {
  counter-increment: step;
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-600); color: #fff;
  font-weight: 900; font-size: 1.0625rem;
}
.step__num::before { content: counter(step); }
.step h3 { margin-bottom: .375rem; }
.step p { font-size: 1rem; }

/* 10a-0. Hero screenshot stage ---------------------------------------------
   Real CommTrak screenshots rather than a recreation. A browser-style window
   cross-fades through three main screens; two smaller cards float over its
   corners. Motion stops under prefers-reduced-motion. */
/* Everything — window and both cards — stays inside the column box, so
   nothing is clipped at the viewport edge or crosses into the headline. */
.stage { position: relative; padding: 2.25rem 0 3rem 2.5rem; }

.stage__window {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(6, 16, 34, .6), 0 12px 30px -12px rgba(6, 16, 34, .3);
}
.stage__chrome {
  display: flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  background: #E9EEF5; border-bottom: 1px solid #DCE3ED;
}
.stage__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #C9D3E1; }
.stage__chrome i:nth-child(1) { background: #F2A7A0; }
.stage__chrome i:nth-child(2) { background: #F5D38A; }
.stage__chrome i:nth-child(3) { background: #A6D8A8; }

/* the cross-fading screens share one box — four screens, 5s each */
.stage__screens { position: relative; aspect-ratio: 16 / 9; background: #F4F7FB; }
.stage__screens img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  opacity: 0;
  animation: stage-fade 20s infinite;
}
.stage__screens img:nth-child(1) { animation-delay: 0s; }
.stage__screens img:nth-child(2) { animation-delay: 5s; }
.stage__screens img:nth-child(3) { animation-delay: 10s; }
.stage__screens img:nth-child(4) { animation-delay: 15s; }
@keyframes stage-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* floating cards */
.stage__card {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 24px 48px -18px rgba(6, 16, 34, .55);
}
.stage__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the workflow screenshot holds two charts; show only the Due vs Overdue half */
.stage__card--chart { left: 0; bottom: 0; width: 38%; aspect-ratio: 1.35; animation: stage-float 7s ease-in-out infinite; }
.stage__card--chart img { object-position: right top; }
.stage__card--tasks { right: 0; top: 0; width: 50%; animation: stage-float 8s ease-in-out -3s infinite; }
.stage__card--tasks img { height: auto; }
@keyframes stage-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (max-width: 1000px) {
  .stage { padding: 2rem 0 2.5rem 2rem; }
}
@media (max-width: 560px) {
  .stage { padding: 0; }
  .stage__card { display: none; }       /* too small to read — keep the main screen */
}

@media (prefers-reduced-motion: reduce) {
  .stage__screens img { animation: none; }
  .stage__screens img:first-child { opacity: 1; }
  .stage__card { animation: none; }
}

/* 10a-2. Workflow mocks ---------------------------------------------------
   CSS recreations of two CommTrak Workflow screens, built from screenshots of
   the real UI. Same reasoning as the hero shot: the real grabs show a named
   customer's overdue work and the staff member it's sitting with, which has no
   place on a public page. All names and dates below are invented.
   Decorative — the surrounding copy carries the meaning. */
.wf {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh);
  font-size: 12px;
  line-height: 1.35;
  user-select: none;
}
.wf__head {
  background: var(--blue-700); color: #fff;
  padding: .5rem .75rem;
  font-weight: 900; font-size: 11.5px;
}
.wf__scroll { overflow-x: auto; }
.wf table { width: 100%; border-collapse: collapse; min-width: 560px; }
.wf th, .wf td {
  text-align: left; padding: .45rem .6rem;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.wf th {
  font-size: 9.5px; font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  background: #FAFCFF;
}
.wf td { color: #46536b; }
.wf tr:last-child td { border-bottom: 0; }
.wf__case { font-weight: 900; color: var(--blue-700); }
.wf__over { color: #C0392B; font-weight: 700; }
.wf__ok { color: #1F7A43; font-weight: 700; }

/* the little segmented progress bar in the status column */
.wf__bar { display: flex; gap: 2px; min-width: 84px; }
.wf__bar span {
  height: 9px; flex: 1; border-radius: 2px;
  background: #E7ECF4; border: 1px solid #DBE3EE;
}
.wf__bar .g { background: #27AE60; border-color: #27AE60; }
.wf__bar .r { background: #E05A16; border-color: #E05A16; }
.wf__bar .b { background: #3F7CD8; border-color: #3F7CD8; }

/* task list with colour-coded status rows */
.wf-tasks { display: grid; }
.wf-tasks__row {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  gap: .75rem; align-items: center;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--line-2);
}
.wf-tasks__row:last-child { border-bottom: 0; }
.wf-tasks__box {
  width: 17px; height: 17px; border-radius: 3px;
  border: 1px solid #C3CFE0; background: #fff;
  display: grid; place-items: center;
}
.wf-tasks__row--done   { background: #EAF7EF; }
.wf-tasks__row--doing  { background: #EDF3FD; }
.wf-tasks__row--late   { background: #FDEDE8; }
.wf-tasks__row--done  .wf-tasks__box { background: #27AE60; border-color: #27AE60; }
.wf-tasks__row--doing .wf-tasks__box { background: #3F7CD8; border-color: #3F7CD8; }
.wf-tasks__row--late  .wf-tasks__box { background: #E05A16; border-color: #E05A16; }
.wf-tasks__box svg { width: 11px; height: 11px; color: #fff; }
.wf-tasks__name { color: var(--ink); font-weight: 700; }
.wf-tasks__row--done .wf-tasks__name { text-decoration: line-through; color: #6B7891; font-weight: 400; }
.wf-tasks__who { color: var(--muted); font-size: 11px; white-space: nowrap; }
.wf-tasks__when { color: var(--muted); font-size: 11px; white-space: nowrap; }
.wf-tasks__when--late { color: #C0392B; font-weight: 700; }

@media (max-width: 620px) {
  .wf-tasks__row { grid-template-columns: 26px 1fr; row-gap: .2rem; }
  .wf-tasks__who, .wf-tasks__when { grid-column: 2; font-size: 10.5px; }
}

/* 10a-3. Video ------------------------------------------------------------ */
.video-card {
  position: relative;
  max-width: 960px; margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--blue-900);
  box-shadow: var(--sh-lg);
}
.video-card__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* The cover sits over the video until it is clicked; JS removes it. Without
   JS the cover is never shown, so the native controls stay reachable. */
.video-card__cover { display: none; }
.js .video-card__cover {
  display: block; position: absolute; inset: 0;
  width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--blue-900);
}
.video-card__cover img {
  width: 100%; height: 100%; object-fit: cover; object-position: top left;
  opacity: .35; transition: opacity .25s var(--ease), transform .4s var(--ease);
}
.video-card__cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(13, 31, 60, .55), rgba(45, 98, 174, .55));
}
.video-card__play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%; background: var(--orange-500);
  box-shadow: 0 12px 30px -8px rgba(234, 82, 0, .6);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.video-card__play::before {
  content: ''; position: absolute; left: 34px; top: 26px;
  border-style: solid; border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #fff;
}
.video-card__time {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 1;
  padding: .25rem .6rem; border-radius: 999px;
  background: rgba(13, 31, 60, .75); color: #fff;
  font-size: .8125rem; font-weight: 700;
}
.video-card__cover:hover img { opacity: .45; transform: scale(1.02); }
.video-card__cover:hover .video-card__play,
.video-card__cover:focus-visible .video-card__play { transform: scale(1.08); background: var(--orange-600); }
/* loading: the play button becomes a spinner until the video starts */
.video-card__cover.is-loading { cursor: progress; }
.video-card__cover.is-loading .video-card__play { background: transparent; box-shadow: none; border: 4px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: video-spin .8s linear infinite; }
.video-card__cover.is-loading .video-card__play::before { display: none; }
@keyframes video-spin { to { transform: rotate(360deg); } }
.video-card__cover:focus-visible { outline: 3px solid var(--blue-500); outline-offset: -3px; }
@media (max-width: 560px) {
  .video-card { border-radius: var(--r); }
  .video-card__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .video-card__play::before { left: 26px; top: 20px; border-width: 12px 0 12px 19px; }
}

/* 10b. Journey timeline ---------------------------------------------------
   Onboarding shown as a route with a destination, rather than four
   disconnected boxes. The spine is decorative; the list order carries the
   meaning for anyone not seeing the styling. */
.journey { position: relative; padding-left: 76px; }
.journey::before {
  content: '';
  position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg,
    transparent 0,
    var(--blue-200) 3%,
    var(--blue-200) 78%,
    var(--orange-500) 96%,
    transparent 100%);
}
@media (max-width: 620px) {
  .journey { padding-left: 54px; }
  .journey::before { left: 19px; }
}

.journey__item { position: relative; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.journey__item:last-child { padding-bottom: 0; }

.journey__node {
  position: absolute; left: -76px; top: 2px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue-200);
  color: var(--blue-700);
  font-size: 1.125rem; font-weight: 900;
  box-shadow: 0 0 0 6px var(--white);
}
@media (max-width: 620px) {
  .journey__node { left: -54px; width: 40px; height: 40px; font-size: .9375rem; }
}
.section--tint .journey__node { box-shadow: 0 0 0 6px var(--tint); }

.journey__stage {
  font-size: .75rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: .25rem;
}
.journey__item h3 { margin-bottom: .5rem; }

/* the outcome each stage leaves you with */
.journey__gain {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .4375rem .8125rem;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: 999px;
  font-size: .8125rem; font-weight: 700; color: var(--blue-700);
}
.journey__gain::before {
  content: ''; width: .875rem; height: .875rem; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A4079' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the destination */
.journey__item--milestone .journey__node {
  background: var(--orange-500); border-color: var(--orange-500); color: #fff;
}
.journey__item--milestone .journey__node svg { width: 22px; height: 22px; }
.journey__milestone {
  background: linear-gradient(120deg, var(--orange-50), var(--blue-50));
  border: 1px solid var(--orange-100);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.journey__milestone h3 { color: var(--orange-600); }
.journey__milestone p { color: var(--body); }

/* 10c. Independent assessment callout ------------------------------------- */
.assessment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--sh);
}
@media (max-width: 620px) { .assessment { grid-template-columns: 1fr; text-align: center; } }

.assessment__badge {
  display: grid; place-items: center; gap: .25rem;
  min-width: 190px;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--blue-700), var(--blue-600));
  color: #fff;
  text-align: center;
}
.assessment__result {
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
}
.assessment__label {
  font-size: .6875rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-200);
}
.assessment__body h3 { margin-bottom: .5rem; }

/* labelled spec list — for label/description pairs that would otherwise
   flatten into a run of one-line paragraphs */
.specs { display: grid; gap: .875rem; margin-top: 1.5rem; }
.specs__item {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-500);
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem;
}
.section--tint .specs__item { background: #fff; }
.specs dt {
  font-weight: 900; color: var(--ink);
  font-size: 1.0625rem; letter-spacing: -.01em;
  margin-bottom: .25rem;
}
.specs dd { margin: 0; font-size: 1rem; }

/* FAQ list */
.faq { display: grid; gap: .875rem; }
.faq__item {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.25rem 1.5rem;
}
.faq dt {
  font-weight: 900; color: var(--ink);
  font-size: 1.0625rem; letter-spacing: -.01em; margin-bottom: .5rem;
}
.faq dd { margin: 0; }

/* 11. Testimonial --------------------------------------------------------- */
.quote {
  max-width: 46rem; margin-inline: auto; text-align: center;
}
.quote__mark {
  font-size: 3.5rem; line-height: 1; font-weight: 900;
  color: var(--blue-200); margin-bottom: .5rem;
}
.quote blockquote {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.35; font-weight: 900; letter-spacing: -.02em;
  color: var(--ink);
}
.section--dark .quote blockquote { color: #fff; }
.quote figcaption { margin-top: 1.25rem; font-size: .9375rem; color: var(--muted); }
.quote cite { font-style: normal; font-weight: 900; color: var(--ink); display: block; }
.section--dark .quote cite { color: #fff; }
.section--dark .quote figcaption { color: rgba(255, 255, 255, .65); }

/* 12. Logo wall ----------------------------------------------------------- */
/* Separators are drawn per cell rather than by showing a grid background
   through 1px gaps — with the gap technique a part-filled last row left
   phantom grey cells where there was no logo. overflow:hidden trims the
   outer edges, so only interior lines show. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.logo-wall li {
  background: #fff;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.logo-wall a, .logo-wall span {
  display: grid; place-items: center;
  height: 124px; padding: 1.375rem;
  transition: background-color .18s var(--ease);
}
.logo-wall a:hover { background: var(--blue-50); }
/* Size buckets, assigned per logo from its real aspect ratio by
   tools/logo-size.js. Capping height alone made wide wordmarks look tiny and
   squarish marks look oversized; these equalise the optical area instead. */
.logo-wall img {
  width: auto; max-width: 100%;
  max-height: 52px;                 /* default — ratios about 1.5–2.1 */
  object-fit: contain;
  filter: grayscale(1);
  opacity: .82;
  transition: filter .2s var(--ease), opacity .2s var(--ease);
}
.logo-wall .logo--sq     { max-height: 60px; }   /* < 1.5  */
.logo-wall .logo--wide   { max-height: 44px; }   /* 2.1–3.0 */
.logo-wall .logo--wider  { max-height: 36px; }   /* 3.0–4.5 */
/* A very long wordmark runs out of cell width before it reaches its height
   cap, so it is allowed to use the horizontal padding too. */
.logo-wall .logo--widest { max-height: 30px; max-width: 168px; }
.logo-wall a:hover img, .logo-wall--colour img { filter: none; opacity: 1; }


/* 13. Forms --------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: var(--sh-md);
}
.field { display: grid; gap: .4375rem; margin-bottom: 1.125rem; }
.field label { font-size: .875rem; font-weight: 900; color: var(--ink); }
.field .hint { font-size: .8125rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .75rem .9375rem;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(63, 124, 216, .16);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; gap: 0; } }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem; }
@media (max-width: 560px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
  position: relative;
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem .9375rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--tint);
  font-size: .9375rem; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.choice:hover { border-color: var(--blue-200); }
.choice input { accent-color: var(--blue-600); width: 1.05rem; height: 1.05rem; }
.choice:has(input:checked) { border-color: var(--blue-500); background: var(--blue-50); }

.form-note { font-size: .8125rem; color: var(--muted); margin-top: 1rem; }
.form-aside li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.125rem; }
.form-aside .card__icon { width: 38px; height: 38px; margin: 0; flex: none; }
.form-aside .card__icon svg { width: 18px; height: 18px; }

/* 14. Comparison table ---------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); border: 1px solid var(--line); }
table.compare { width: 100%; border-collapse: collapse; background: #fff; min-width: 640px; }
table.compare th, table.compare td { padding: .875rem 1.125rem; text-align: left; border-bottom: 1px solid var(--line-2); }
table.compare thead th {
  position: sticky; top: 0;
  background: var(--blue-50); color: var(--ink);
  font-size: .8125rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
table.compare tbody th { font-weight: 700; color: var(--ink); }
table.compare td { text-align: center; width: 130px; }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }
table.compare tbody tr:hover { background: var(--tint); }
.tick-y { color: var(--blue-600); font-weight: 900; }
.tick-n { color: var(--line); }
tr.group th {
  background: var(--tint); font-size: .8125rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 900;
}

/* 15. Footer -------------------------------------------------------------- */
.footer {
  background: var(--blue-900);
  color: var(--on-dark-muted);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  font-size: .9375rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo img { width: 200px; margin-bottom: 1.125rem; }
.footer h3 {
  color: #fff; font-size: .8125rem; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.footer ul { display: grid; gap: .625rem; }
.footer a { color: var(--on-dark-muted); }
.footer a:hover { color: #fff; }
.footer__bar {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .875rem; color: rgba(255, 255, 255, .48);
}

.footer .footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer__bar a { color: rgba(255, 255, 255, .72); }
.footer__bar a:hover { color: #fff; text-decoration: underline; }
.footer__filetype { font-size: .75rem; opacity: .7; }
@media (max-width: 560px) { .footer__bar { flex-direction: column; gap: .75rem; } }

/* small utilities that replace one-off inline styles */
.card--tint { background: var(--blue-50); border-color: var(--blue-100); }
.shot--pad img { padding: 2.5rem; background: #fff; }
.text-sm { font-size: .9375rem; }
.text-xs { font-size: .875rem; }
.label-caps {
  font-size: .875rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 2rem;
}
.stack-top { align-items: start; }
.field fieldset, fieldset.field { border: 0; padding: 0; }
.field legend {
  font-size: .875rem; font-weight: 900; color: var(--ink);
  padding: 0; margin-bottom: .5rem;
}
.mb-gap { margin-bottom: 1.75rem; }
.mt-gap { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.hint--gap { margin-bottom: .625rem; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band .lead { max-width: 38rem; margin-inline: auto; }
.cta-band .btn-row { margin-top: 2rem; justify-content: center; }

/* 16. Utilities / motion --------------------------------------------------- */
.center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shot {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  overflow: hidden;
  background: #fff;
}

/* Reveal-on-scroll is a progressive enhancement only. Content is visible by
   default; it is hidden ONLY once the inline head script has confirmed JS is
   running, and site.js carries a failsafe timer that reveals everything even
   if IntersectionObserver never fires. Never let copy depend on JS to appear. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}