@import url("actions.2b9b1e279d.css");

/* The OPTIZMO integration page.

   Hand-written, on the light ground: <html data-ground="light"> points the
   semantic tokens in tokens.css at their light values, so every colour here is
   a token. The drawings each bring a stylesheet of their own under
   css/optizmo/, linked from the page's head.

   One width decides every two-column layout and every row of cards, so the
   page changes shape once rather than section by section. */

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

html { scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

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

a { color: var(--color-link); }

.wrap {
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

/* ---- the bar at the top ---- */

.top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4rem;
}
.top-home img { height: 22px; width: auto; }
.top-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.top-link {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
}
.top-link:hover { color: var(--color-text); }
@media (max-width: 520px) {
  .top-links { gap: var(--space-4); }
  .top-link:first-child { display: none; }
}

/* ---- buttons ----
   The buttons and the text links are actions.css's, imported at the top. */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.cta-note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* A filled ask and the quieter one beside it, level with each other; the link
   takes the button's height from actions.css. */
.cta-pair { align-items: center; column-gap: var(--space-6); }
/* Under a section's lead, a step below it rather than the lead's full margin. */
.section-lead:has(+ .link-more) { margin-bottom: var(--space-5); }

/* ---- bands ----
   The page alternates white and the band grey. A band that follows one of
   the same colour adds no edge of its own, so two white bands read as one
   continuous stretch with a section break inside it. */

.band {
  position: relative;
  padding-block: var(--space-20);
}
@media (min-width: 720px) {
  .band { padding-block: var(--space-24); }
}
.band-white { background: var(--paper-ground); }
.band-grey { background: var(--paper-band); }
.band-white + .band-white,
.band-grey + .band-grey { padding-top: 0; }
/* A grey band whose top fades in from the white above it, rather than meeting it at a line. */
.band-fade { background: linear-gradient(180deg, var(--paper-ground), var(--paper-band) 12rem); }

/* ---- a section's words ----
   The topic above the claim the way Apple's product pages set it: the
   headline's own ink and case, well below it in size, not tracked capitals
   in an accent colour. The eyebrow and the title are type.css's, shared with
   the homepage; the rest of a section's words are this page's. */

/* Without a lead the headline is the last thing before the content, so it takes the gap the lead would have left. */
.section-title-alone { margin-bottom: var(--space-8); }
.section-lead strong { color: var(--color-text); font-weight: var(--font-semibold); }
/* Centred over content whose edges mirror each other, such as a row of equal cards or of logos. */
.centred { text-align: center; }
.centred .section-lead { margin-inline: auto; text-wrap: balance; }

/* Two columns once there is room: words on one side, a drawing on the other. */
.split { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 1080px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ---- the one movement each section makes ----
   Up into place the first time it is seen. page.js adds .reveal-armed only
   where it will play, so without script, or for a reader who prefers less
   motion, every section is simply there. */

.reveal-armed {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal-armed.is-seen { opacity: 1; transform: none; }

/* ---- a card that answers the pointer ----
   Its ground sits a little in from its box at rest and grows to the edge while
   pointed at, and its edge lights up round the pointer. hover-card.js marks it
   data-pointed only for a pointer that can hover. */

.hover-card {
  --card-radius: 20px;
  --card-ground: var(--color-bg);
  --card-edge: var(--color-border);
  --card-glow: rgba(37, 99, 235, 0.55);
  position: relative;
  isolation: isolate;
}
.hover-card > [data-rim],
.hover-card > [data-ground] {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hover-card > [data-rim] {
  inset: -1px;
  overflow: hidden;
  border-radius: calc(var(--card-radius) + 1px);
  background: var(--card-edge);
  clip-path: inset(6px round calc(var(--card-radius) + 1px));
}
.hover-card > [data-rim]::before {
  content: "";
  position: absolute;
  left: var(--glow-x, 50%);
  top: var(--glow-y, 50%);
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-glow), transparent 70%);
  opacity: 0;
  transition: opacity 250ms linear;
}
.hover-card > [data-ground] {
  inset: 0;
  border-radius: var(--card-radius);
  background: var(--card-ground);
  clip-path: inset(6px round var(--card-radius));
}
@media (prefers-reduced-motion: no-preference) {
  .hover-card > [data-rim],
  .hover-card > [data-ground] { transition: clip-path 800ms cubic-bezier(0.165, 0.84, 0.44, 1); }
}
.hover-card[data-pointed] > [data-rim] { clip-path: inset(0 round calc(var(--card-radius) + 1px)); }
.hover-card[data-pointed] > [data-rim]::before { opacity: 1; }
.hover-card[data-pointed] > [data-ground] { clip-path: inset(0 round var(--card-radius)); }

/* ---- a customer's words ---- */

.testimonial {
  margin: 0 auto;
  max-width: 52rem;
  text-align: center;
}
.testimonial blockquote { margin: 0; }
.testimonial blockquote p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.testimonial figcaption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  text-align: left;
}
.testimonial-initials {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--paper-wash);
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}
.testimonial figcaption strong { display: block; color: var(--color-text); }
.testimonial-company { color: var(--color-text-muted); }

/* ---- questions ---- */

.faq {
  max-width: 52rem;
  border-top: 1px solid var(--paper-line-hi);
}
.faq details { border-bottom: 1px solid var(--paper-line-hi); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that turns to a minus as the answer opens. */
.faq summary::after {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--color-text-muted);
  transition: transform var(--duration-normal) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.faq details p {
  margin: 0 0 var(--space-6);
  max-width: 44rem;
  color: var(--color-text-muted);
}
.faq-more {
  margin: var(--space-8) 0 0;
  color: var(--color-text-muted);
}

/* ---- the foot ---- */

.foot {
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-12);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.foot a { color: var(--color-text-muted); text-decoration: none; }
.foot a:hover { color: var(--color-text); }
@media (max-width: 600px) {
  .foot-row { flex-direction: column; }
}