/* Sync CRM marketing site — layout, responsiveness and accessibility.
 *
 * The design was authored at a fixed 1400px desktop width: `body{min-width:1400px}`
 * and a single media query in the whole document. Everything below the desktop
 * breakpoint is therefore added here rather than inherited.
 *
 * Two layouts ship in the page: the design's desktop tree, scaled between 900px
 * and its 1400px canvas, and the design's own phone tree below 900px. Nothing
 * here reflows the desktop layout any more — that approach clipped headlines
 * and buttons on real phones.
 */

/* ── the fixed-width override ──────────────────────────────────────────────── */
/* Beaten only by specificity: the design sets min-width on `body` directly. */
html body {
  min-width: 0;
  overflow-x: hidden;
}

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

img, svg, video { max-width: 100%; }

/* ── shared page rhythm ────────────────────────────────────────────────────── */
:root {
  --page-max: 1240px;
  --gutter: 24px;
}

/* ── between phone and the design width: shrink, don't reflow ──────────────── */
/*
 * The design is a 1400px canvas. Reflowing it at 1100px was wrong: a 1000px
 * window is an ordinary desktop window, and stacking it there left the nav in
 * three rows and 56px headlines running the full width — the layout read as
 * enormous because it was a phone layout at desktop type sizes.
 *
 * Down to 900px the whole page is scaled instead, which is what the design
 * intends and keeps every proportion the designer chose. `zoom` rather than
 * `transform: scale()` because zoom participates in layout: the document height
 * stays correct and the fixed header keeps working, whereas a transform on an
 * ancestor makes `position: fixed` resolve against that ancestor and the header
 * would scroll away.
 *
 * Below 900px scaling would make text too small to read, so that is where the
 * phone tree takes over.
 */
/*
 * `zoom: calc(100vw / 1400)` does not work: that expression resolves to a
 * length, and zoom takes a unitless number. CSS cannot express a
 * viewport-relative ratio, so these are discrete steps and site.js refines the
 * value to the exact ratio on load and resize.
 *
 * Each step uses the *lower* bound of its range, so the page is occasionally a
 * little narrower than the window but is never wider than it — clipping the
 * design would be worse than a small margin, and the script removes even that.
 * Above 1400px the page is not enlarged: content stays centred at design size.
 */
@media (min-width: 900px)  and (max-width: 999px)  { body { zoom: 0.642; } }
@media (min-width: 1000px) and (max-width: 1099px) { body { zoom: 0.714; } }
@media (min-width: 1100px) and (max-width: 1199px) { body { zoom: 0.785; } }
@media (min-width: 1200px) and (max-width: 1299px) { body { zoom: 0.857; } }
@media (min-width: 1300px) and (max-width: 1399px) { body { zoom: 0.928; } }

@media (max-width: 1439px) {
  /* Fixed pixel widths on inner panels are the main source of overflow. */
  [style*="min-width:1400px"],
  [style*="min-width: 1400px"] { min-width: 0 !important; }
}

/* ── short windows ─────────────────────────────────────────────────────────── */
/* The hero carries `padding: 150px 40px 90px` — 240px of empty space, a quarter
 * of its height, sized for a tall desktop display. On a laptop window that is
 * the difference between seeing the whole illustration and seeing half of it.
 * Reclaiming the padding is free and costs no legibility. */
@media (min-width: 900px) and (max-height: 860px) {
  section#top { padding-top: 84px !important; padding-bottom: 40px !important; }
}
@media (min-width: 900px) and (max-height: 700px) {
  section#top { padding-top: 68px !important; padding-bottom: 24px !important; }
}

/* ── two layouts, one page ─────────────────────────────────────────────────── */
/* The export carries a desktop tree and a mobile tree; the build ships both and
 * this picks one. 900px rather than the design's 768px: between 768 and 899 the
 * desktop tree would be zoomed to about 0.55, which puts body copy near 8px.
 * The phone layout at 800px is merely roomy; the desktop layout at 0.55 cannot
 * be read. */
.dc-mobile { display: none; }
@media (max-width: 899px) {
  .dc-desktop { display: none; }
  .dc-mobile { display: block; }
  body { zoom: 1; }
}

/* ── phone: the demo form, carried over from the desktop panel ─────────────── */
.m-demo-card {
  background: #fff;
  color: #0B1B33;
  text-align: left;
  border-radius: 16px;
  padding: 22px 18px;
  margin-top: 26px;
  box-shadow: 0 18px 44px rgba(11, 27, 51, .09);
}
.m-demo-card [style*="font-size:32px"] { font-size: 24px !important; }
.m-demo-card [style*="font-size:28px"] { font-size: 22px !important; }
.m-demo-card [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.m-demo-card [style*="display:flex"] { flex-wrap: wrap; }

/* ── screen-reader-only text ───────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the sticky sign-in / nav affordance ───────────────────────────────────── */
.site-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  border-radius: 10px;
  padding: 11px 18px;
  background: #2563EB;
  color: #fff;
  border: 1px solid #2563EB;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
  transition: transform .2s, box-shadow .2s;
}
.site-cta:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .34);
}
.site-cta--ghost {
  background: transparent;
  color: #0B1B33;
  border-color: #D9E2F2;
  box-shadow: none;
}
.site-cta--ghost:hover { color: #0B1B33; background: #F2F6FD; border-color: #B9CCEA; }

/* ── variants ──────────────────────────────────────────────────────────────── */
/* `hidden` must win over the design's inline `display:` values. */
[hidden] { display: none !important; }

/* ── focus visibility ──────────────────────────────────────────────────────── */
/* The design styles buttons inline and never defines a focus ring; keyboard
 * users would otherwise have no indication of position at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[data-act]:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── reduced motion ────────────────────────────────────────────────────────── */
/* The design handles [data-rv] itself; this covers the additions above. */
@media (prefers-reduced-motion: reduce) {
  .site-cta { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── print ─────────────────────────────────────────────────────────────────── */
@media print {
  #sync-progress, .site-cta { display: none !important; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}