/* ==========================================================================
   Saynon AI landing page
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --- Base ----------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header must not cover the anchored heading. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: 700; letter-spacing: -0.012em; line-height: 1.35; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

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

.on-dark :focus-visible { outline-color: var(--focus-on-dark); }

/* --- Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section--tint { background: var(--bg-tint); }

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark-muted);
}

.section--dark h2,
.section--dark h3 { color: var(--text-on-dark); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--navy-900);
  color: var(--white);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: translate var(--dur) var(--ease);
}

.skip-link:focus-visible { translate: -50% 0; outline-offset: -3px; }

/* --- Eyebrow -------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.125rem;
  color: var(--text-muted);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  flex: none;
}

.eyebrow--center { justify-content: center; }

.section--dark .eyebrow { color: var(--navy-300); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              translate var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Cyan on navy is 10.8:1, so the accent can carry the primary action. */
.btn--primary {
  background: var(--cyan);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: #4DF3FA;
  translate: 0 -1px;
  box-shadow: var(--shadow);
}

.btn--secondary {
  background: transparent;
  border-color: var(--navy-200);
  color: var(--navy-900);
}

.btn--secondary:hover { border-color: var(--navy-900); background: var(--navy-050); }

.on-dark .btn--secondary {
  border-color: var(--line-on-dark);
  color: var(--white);
}

.on-dark .btn--secondary:hover {
  border-color: rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.06);
}

.btn--sm { min-height: 2.5rem; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }

/* --- Header --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Every logo file has a white matte baked in, so the bar the mark sits on
     must stay white. This is an asset constraint, not a style choice. */
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px -6px rgb(0 35 70 / 0.18);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand {
  display: block;
  flex: none;
  /* The official lockup carries 25% blank space above and below the artwork,
     so scaling it to a slim header would leave the logo looking tiny. This
     crops that whitespace at render time, letting the artwork itself fill the
     bar. The asset is untouched: no resize distortion, no new file, and the
     aspect ratio below is the artwork's own (403x131 of the 480x256 PNG). */
  overflow: hidden;
  width: 8.25rem;
  aspect-ratio: 403 / 131;
  border-radius: 2px;
}

.brand img {
  display: block;
  width: 119.11%;          /* 480 / 403 */
  max-width: none;
  height: auto;
  margin-left: -9.18%;     /* -37 / 403 */
  margin-top: -15.87%;     /* -64 / 480, percentages resolve against width */
  /* The official PNGs have a #FEFEFE matte baked in. Multiply drops it into
     any light backdrop; the navy and cyan pixels are unchanged. It is a
     render-time fix, not an edit to the asset. */
  mix-blend-mode: multiply;
}

.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__link {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  color: var(--navy-700);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav__link:hover { color: var(--navy-900); background: var(--navy-050); }

.header__cta { flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--navy-900);
  cursor: pointer;
}

.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 55.99em) {
  .nav-toggle { display: inline-flex; }

  /* Hidden by default so the panel cannot flash open before JS runs.
     display:none also keeps it out of the accessibility tree while closed. */
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .header.is-nav-open .nav { display: block; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0.125rem; }

  .nav__link { padding: 0.875rem 0.75rem; font-size: 1.0625rem; }

  .nav__cta { margin-top: 0.75rem; }
  .nav__cta .btn { width: 100%; }

  .header__cta { display: none; }
}

/* Tablet step, so the lockup does not look stranded in a wider header. */
@media (min-width: 48em) {
  .brand { width: 9.5rem; }
}

@media (min-width: 56em) {
  .nav__cta { display: none; }

  /* Artwork 56px tall inside the unchanged 72px bar, leaving 8px clear
     above and below. Near parity with the footer lockup's 181px artwork.
     This is the widest the logo can go without the bar growing. */
  .brand { width: 10.75rem; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(4rem, 2.5rem + 6vw, 7.5rem);
  text-align: center;
}

.hero__inner { max-width: 54rem; margin-inline: auto; }

.hero h1 { margin-bottom: 1.5rem; }

.hero h1 .accent { color: var(--cyan); }

.hero__lead {
  max-width: 44rem;
  margin-inline: auto;
  font-size: var(--step-lead);
  color: var(--text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

.hero__note {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Abstract level meter. Signals "voice" without depicting a fake call. */
.wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 0.875rem;
}

.wave span {
  width: 3px;
  height: 30%;
  background: var(--cyan);
  border-radius: 2px;
  animation: wave 1.5s var(--ease) infinite;
}

.wave span:nth-child(1) { animation-delay: 0ms; }
.wave span:nth-child(2) { animation-delay: 180ms; }
.wave span:nth-child(3) { animation-delay: 90ms; }
.wave span:nth-child(4) { animation-delay: 300ms; }
.wave span:nth-child(5) { animation-delay: 220ms; }

@keyframes wave {
  0%, 100% { height: 28%; }
  50%      { height: 100%; }
}

.eyebrow--wave::before { display: none; }

/* --- Section head --------------------------------------------------------- */

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem); }
.section-head p { margin-top: 1.125rem; font-size: var(--step-lead); }
.section--dark .section-head p { color: var(--navy-300); }

/* --- What we do ----------------------------------------------------------- */

.offer {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 56em) {
  .offer { grid-template-columns: 1.35fr 1fr; gap: 1.75rem; }
}

.offer__card {
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* The primary offering is heavier: cyan rule, larger type, more room. */
.offer__card--primary {
  border-top: 3px solid var(--cyan);
  box-shadow: var(--shadow);
}

.offer__card--support { background: var(--white); box-shadow: none; }

.offer__tag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--navy-100);
  color: var(--navy-700);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.offer__card--primary .offer__tag { background: var(--navy-900); color: var(--white); }

.offer__card h3 { margin-bottom: 0.875rem; }
.offer__card--primary h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 800; }

.offer__card p + p { margin-top: 0.875rem; }

/* --- Capability groups ---------------------------------------------------- */

.caps { display: grid; gap: clamp(2rem, 1.4rem + 2.2vw, 3rem); }

@media (min-width: 48em) { .caps { grid-template-columns: repeat(3, 1fr); } }

.caps__group h3 {
  padding-bottom: 0.875rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid var(--line);
}

.ticks li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text);
}

.ticks li + li { margin-top: 0.75rem; }

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--cyan);
  border-radius: 50%;
}

/* --- How it works --------------------------------------------------------- */

.steps { display: grid; gap: 2rem; counter-reset: step; }

@media (min-width: 56em) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.step { position: relative; padding-top: 2rem; border-top: 1px solid var(--line-on-dark); }

.step__num {
  position: absolute;
  top: -0.75rem;
  left: 0;
  padding-right: 0.75rem;
  background: var(--bg-dark);
  color: var(--cyan);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.step h3 { margin-bottom: 0.625rem; }
.step p { color: var(--navy-300); font-size: 1rem; }

/* --- Automations ---------------------------------------------------------- */

.auto-grid {
  display: grid;
  gap: 0 3rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .auto-grid { grid-template-columns: repeat(2, 1fr); }
}

.auto-grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--navy-700);
  font-weight: 500;
}

.auto-grid li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55em;
  background: var(--cyan);
  border-radius: 50%;
}

/* --- Closing CTA ---------------------------------------------------------- */

.cta { text-align: center; }
.cta__inner { max-width: 44rem; margin-inline: auto; }
.cta h2 { margin-bottom: 1.125rem; }
.cta p { font-size: var(--step-lead); color: var(--navy-300); }
.cta .btn { margin-top: 2rem; }

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--navy-050);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 2.2rem + 2.6vw, 4.5rem) 2rem;
}

.footer__top { display: grid; gap: 2.5rem; }

@media (min-width: 48em) {
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; }
}

.footer__logo { width: 13.5rem; mix-blend-mode: multiply; }

.footer__blurb {
  margin-top: 1.5rem;
  max-width: 24rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.footer h2 {
  margin-bottom: 1rem;
  color: var(--navy-900);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer address { font-style: normal; color: var(--text); font-size: 0.9375rem; line-height: 1.7; }

.footer__nav li + li { margin-top: 0.125rem; }

/* WCAG 2.2 AA target size (2.5.8) is 24x24. The bare text link measured 19px,
   so the padding here is a conformance requirement, not spacing taste. */
.footer__nav a {
  display: inline-block;
  padding-block: 0.3125rem;
  min-height: 1.5rem;
  color: var(--text);
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: 2px;
}

.footer__nav a:hover { color: var(--navy-900); text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* --- Legal pages ---------------------------------------------------------- */

.legal { max-width: 46rem; }

.legal h1 { margin-bottom: 0.625rem; }

.legal__updated {
  margin-bottom: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.legal h2 {
  margin-top: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  margin-bottom: 0.75rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
}

.legal p + p { margin-top: 1rem; }

.legal a {
  color: var(--navy-900);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.legal a:hover { color: var(--navy-700); text-decoration-thickness: 2px; }

/* --- Footer legal links ---------------------------------------------------- */

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-left: auto;
}

.footer__legal a {
  display: inline-block;
  /* padding keeps the 24px WCAG 2.2 target size, as in .footer__nav */
  padding-block: 0.25rem;
  min-height: 1.5rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 2px;
}

.footer__legal a:hover { color: var(--navy-900); text-decoration: underline; }

/* --- Modal ---------------------------------------------------------------- */

.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 20 40 / 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.modal__panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: min(42rem, calc(100dvh - 2 * var(--gutter)));
  overflow-y: auto;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modal-in 220ms var(--ease);
}

@keyframes modal-in {
  from { opacity: 0; translate: 0 12px; scale: 0.98; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}

.modal__close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--navy-600);
  cursor: pointer;
}

.modal__close:hover { background: var(--navy-100); color: var(--navy-900); }
.modal__close svg { width: 1.125rem; height: 1.125rem; }

.modal__panel h2 { font-size: 1.5rem; padding-right: 2.5rem; }
.modal__intro { margin-top: 0.625rem; color: var(--text-muted); font-size: 0.9375rem; }

.field { margin-top: 1.125rem; }

.field label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--navy-900);
  font-size: 0.875rem;
  font-weight: 600;
}

.field input {
  width: 100%;
  min-height: 3rem;
  padding: 0.6875rem 0.875rem;
  background: var(--white);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius);
  color: var(--navy-900);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input::placeholder { color: var(--navy-400); }

.field input:hover { border-color: var(--navy-400); }

.field input:focus-visible {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px rgb(0 35 70 / 0.14);
}

.field input[aria-invalid="true"] { border-color: #B3261E; }

.field__error { display: none; margin-top: 0.375rem; color: #B3261E; font-size: 0.8125rem; font-weight: 500; }
.field input[aria-invalid="true"] + .field__error { display: block; }

.modal .btn { width: 100%; margin-top: 1.5rem; }

.modal__fine { margin-top: 1rem; color: var(--text-muted); font-size: 0.8125rem; text-align: center; }

.modal__status {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--navy-050);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm);
  color: var(--navy-700);
  font-size: 0.9375rem;
}

.modal__status[hidden] { display: none; }

/* Wrapper for the provider's calendar. Only spacing, so the panel keeps the
   approved proportions. */
.modal__booking { margin-top: 1.25rem; }

/* Sized so the calendar fits inside the panel and only the calendar scrolls.
   The panel's own dimensions are unchanged. */
.modal__frame {
  width: 100%;
  height: 30rem;
  min-height: 20rem;
  max-height: calc(100dvh - 16rem);
  border: 0;
  border-radius: var(--radius);
}

body.is-locked { overflow: hidden; }

/* --- Reveal ----------------------------------------------------------------
   Scoped to .js so that with JavaScript disabled or broken the content is
   simply visible, rather than a page of invisible sections. */

.js .reveal { opacity: 0; translate: 0 16px; }

.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  transition: opacity 620ms var(--ease), translate 620ms var(--ease);
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal { opacity: 1; translate: none; }

  .wave span:nth-child(1) { height: 45%; }
  .wave span:nth-child(2) { height: 100%; }
  .wave span:nth-child(3) { height: 65%; }
  .wave span:nth-child(4) { height: 90%; }
  .wave span:nth-child(5) { height: 38%; }
}