/* Shared marketing-site styles. Imports the design system tokens. */
@import url('colors_and_type.css');

/* Smooth same-origin page navigation — cross-fades between pages instead of the
   browser's white flash/reload. Supported browsers only; others just navigate normally. */
@view-transition { navigation: auto; }

* { box-sizing: border-box; }

/* Cross-platform normalisation. controls.css carries the full set (form
   controls included) for the pages that have inputs; these three are repeated
   here so the content-only marketing pages get them too — they're the ones that
   apply to any page, not just ones with a form.
     text-size-adjust  — iOS inflates text in landscape; Android doesn't.
     tap-highlight     — iOS flashes a grey box on tap; nothing else does.
     scrollbar-*       — Firefox ignores ::-webkit-scrollbar entirely.
   Both scrollbar properties are inherited, so `html` is enough. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: #c0c5ca transparent;
}
a, button, label, select, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sp-font-ui);
  color: var(--sp-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--sp-green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }

/* ── Breakpoints ──────────────────────────────────────────
   Two deliberately different values, not an oversight:

     860px  marketing pages (this file). Content-driven — the 3-column
            feature/step grids and the 5-link nav stop fitting well before
            640px, so they collapse earlier. Was 760px, which left a dead band
            from 760-860 where the desktop nav (~800px of content) still applied
            and overflowed — 768px iPad portrait landed inside it. Keep this
            above the widest the desktop nav can be.
     430px  small phones, nav only: tightens gaps/padding so the brand, the
            menu toggle and both action buttons fit without sideways scroll.
     640px  the app shell + grid engine (app.html / engine.html, data-vp).
            Chrome-driven — it marks where the desktop toolbar is replaced
            by the compact phone toolbar and bottom tab bar.

   They describe different surfaces and are never on screen together. Change
   one without the other only if that surface's own layout demands it. */

/* ── Site nav ─────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: 64px; padding: 0 32px;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--sp-gray-200);
}
.site-nav .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -.3px; color: var(--sp-gray-900); }
.site-nav .brand-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, var(--sp-green-700), var(--sp-green-500));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(45,106,79,.28);
}
.site-nav .brand-mark svg { width: 16px; height: 16px; }
.site-nav .links { display: flex; gap: 22px; margin-left: 8px; }
.site-nav .links a { color: var(--sp-gray-700); font-size: 14px; font-weight: 500; white-space: nowrap; }
.site-nav .links a:hover { color: var(--sp-green-700); text-decoration: none; }
.site-nav .spacer { flex: 1; }
.site-nav .actions { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px; border-radius: var(--sp-radius-md);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .08s, box-shadow .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--sp-green-700); color: var(--sp-green-75); box-shadow: 0 1px 4px rgba(45,106,79,.28); }
.btn-primary:hover { background: var(--sp-green-900); box-shadow: 0 3px 12px rgba(45,106,79,.4); text-decoration: none; }
.btn-outline { background: transparent; color: var(--sp-gray-700); border-color: var(--sp-gray-300); }
.btn-outline:hover { color: var(--sp-green-700); border-color: var(--sp-green-300); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--sp-gray-700); }
.btn-ghost:hover { color: var(--sp-green-700); text-decoration: none; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; border-radius: var(--sp-radius-lg); }

/* ── Container ───────────────────────────────────────── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ── Hero / sections ─────────────────────────────────── */
.hero {
  padding: 52px 0 40px;
  background: linear-gradient(180deg, var(--sp-green-25) 0%, #fff 100%);
  border-bottom: 1px solid var(--sp-gray-150);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sp-green-700); margin-bottom: 18px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sp-green-500); animation: sp-pulse 2.5s ease-in-out infinite; }
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

h1.display {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--sp-gray-900);
  margin: 0 0 22px;
  max-width: 16ch;
}
h1.display em { font-style: normal; color: var(--sp-green-700); }
.hero-sub { font-size: 18px; color: var(--sp-gray-600); max-width: 56ch; margin: 0 0 32px; line-height: 1.55; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 24px; margin-top: 28px; color: var(--sp-gray-600); font-size: 13px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta svg { color: var(--sp-green-500); }

section { padding: 80px 0; }
section.alt { background: var(--sp-gray-25); border-top: 1px solid var(--sp-gray-150); border-bottom: 1px solid var(--sp-gray-150); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.6px; color: var(--sp-gray-900); margin: 0 0 14px; line-height: 1.15; }
.section-head p { font-size: 16px; color: var(--sp-gray-600); margin: 0; line-height: 1.55; }

/* ── Feature grid ────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  background: #fff; border: 1px solid var(--sp-gray-200);
  border-radius: var(--sp-radius-2xl); padding: 28px 26px;
  transition: border-color .15s, transform .15s;
}
.feature:hover { border-color: var(--sp-green-200); transform: translateY(-2px); }
.feature .ico {
  width: 44px; height: 44px; border-radius: var(--sp-radius-lg);
  background: var(--sp-green-75); color: var(--sp-green-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.feature h3 { font-size: 16px; font-weight: 700; color: var(--sp-gray-900); margin: 0 0 8px; }
.feature p { font-size: 14px; color: var(--sp-gray-600); margin: 0; line-height: 1.55; }

/* ── Steps ───────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { text-align: center; position: relative; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sp-green-700); color: #fff; font-weight: 800; font-size: 15px;
  margin-bottom: 16px; box-shadow: 0 2px 8px rgba(45,106,79,.3);
}
.step h3 { font-size: 17px; font-weight: 700; color: var(--sp-gray-900); margin: 0 0 8px; }
.step p { font-size: 14px; color: var(--sp-gray-600); margin: 0; line-height: 1.55; }

/* ── Footer ──────────────────────────────────────────── */
footer.site-footer {
  background: var(--sp-gray-900); color: var(--sp-gray-300);
  padding: 56px 0 32px; margin-top: 0;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; margin: 0 0 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-grid a { color: var(--sp-gray-300); font-size: 14px; }
.footer-grid a:hover { color: #fff; text-decoration: none; }
/* Not gray-500: this strip sits on gray-900, where that token was already fine
   (7.5:1) and its darkening for light backgrounds would have cut contrast to
   3.8:1. Stated as translucent white so it tracks the dark surface it is on. */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; margin-top: 36px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: rgba(255,255,255,.62); }

/* ── Article / blog ──────────────────────────────────── */
article.post { padding: 64px 0 80px; }
article.post .post-meta { color: var(--sp-gray-500); font-size: 13px; margin-bottom: 12px; }
article.post h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.8px; color: var(--sp-gray-900); line-height: 1.1; margin: 0 0 22px; }
article.post h2 { font-size: 22px; font-weight: 700; margin: 36px 0 12px; color: var(--sp-gray-900); }
article.post p { font-size: 16.5px; line-height: 1.7; color: var(--sp-gray-700); margin: 0 0 18px; }
article.post ul { font-size: 16px; line-height: 1.7; color: var(--sp-gray-700); padding-left: 22px; }
article.post blockquote { border-left: 3px solid var(--sp-green-500); padding: 4px 18px; margin: 24px 0; color: var(--sp-gray-700); font-style: italic; background: var(--sp-green-25); border-radius: 0 var(--sp-radius-md) var(--sp-radius-md) 0; }

.post-card { display: block; background: #fff; border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius-2xl); padding: 24px; transition: border-color .15s, transform .15s; }
.post-card:hover { border-color: var(--sp-green-300); transform: translateY(-2px); text-decoration: none; }
.post-card .tag { display: inline-block; background: var(--sp-green-75); color: var(--sp-green-900); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; margin-bottom: 12px; }
.post-card h3 { font-size: 18px; font-weight: 700; color: var(--sp-gray-900); margin: 0 0 8px; line-height: 1.3; }
.post-card p { color: var(--sp-gray-600); font-size: 14px; margin: 0 0 12px; line-height: 1.5; }
.post-card .post-meta { color: var(--sp-gray-500); font-size: 12.5px; }

/* ── CTA strip ───────────────────────────────────────── */
.cta-strip {
  background: linear-gradient(135deg, var(--sp-green-900), var(--sp-green-700));
  color: #fff; padding: 64px 0; text-align: center;
}
.cta-strip h2 { font-size: 32px; font-weight: 800; margin: 0 0 14px; letter-spacing: -.5px; }
.cta-strip p { color: rgba(255,255,255,.75); font-size: 15.5px; margin: 0 0 28px; }
.cta-strip .btn-primary { background: #fff; color: var(--sp-green-900); }
.cta-strip .btn-primary:hover { background: var(--sp-green-25); }

/* ── Mobile ──────────────────────────────────────────── */
/* ── Mobile nav toggle ────────────────────────────────────
   Injected by site-nav.js on every marketing page, so the 13 duplicated
   nav blocks don't each need editing. Hidden on desktop. */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--sp-gray-300);
  border-radius: var(--sp-radius-md); cursor: pointer;
  color: var(--sp-gray-700); padding: 0; flex-shrink: 0;
}
.nav-toggle:hover { background: var(--sp-gray-50); color: var(--sp-green-700); }
.nav-toggle svg { width: 18px; height: 18px; }

/* 860, not 760: the desktop nav's own content needs ~800px, so between 760 and
   860 it stayed in desktop mode and overflowed — an iPad in portrait is exactly
   768px, which sat right in that gap and scrolled sideways on every marketing
   page. Keep this breakpoint ABOVE the widest the desktop nav can be. */
/* Contact page grids. These were inline styles, which no media query can
   override — so they stayed two-column on a phone and the page scrolled
   sideways by ~96px. Declared here so the mobile collapse below applies. */
.contact-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.contact-pair  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 860px) {
  .site-nav { padding: 0 18px; gap: 12px; }
  /* Let flex children shrink instead of forcing the row wider than the screen. */
  .site-nav .brand { min-width: 0; }
  .site-nav .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-toggle { display: inline-flex; }
  /* The nav links become a drop-down panel instead of vanishing. Before this
     the whole marketing site had NO navigation on a phone — Pricing included. */
  .site-nav .links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--sp-gray-200);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 6px 0;
  }
  .site-nav .links.open { display: flex; }
  /* 48px rows: comfortably above the 44px touch-target minimum. */
  .site-nav .links a {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 18px; font-size: 15px;
  }
  .site-nav .links a:hover { background: var(--sp-gray-50); }
  /* The spacer pushes actions right on desktop; on mobile the toggle owns
     that job, so collapse it or the actions wrap off-screen. */
  .site-nav .spacer { display: none; }
  .site-nav .actions { margin-left: auto; gap: 6px; }
  .site-nav .actions .btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .container, .container-narrow { padding: 0 18px; }
  .feature-grid, .steps, .footer-grid,
  .contact-split, .contact-pair { grid-template-columns: 1fr; gap: 20px; }
  section { padding: 56px 0; }
  .hero { padding: 56px 0 48px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ── Touch targets ────────────────────────────────────────────────────────
   WCAG 2.5.5 and the Apple HIG both want 44x44 CSS px. Audited at 320px, the
   nav buttons were 32px tall, the brand 24, the toggle 40, and nav/footer links
   16 — all comfortably under.

   The nav buttons are NOT simply made taller: the 430px block below pins them
   to 32px precisely because taller ones pushed the bar into sideways scroll.
   So the HIT area grows instead of the box — an absolutely-positioned overlay
   costs no layout, so that fix stays intact.

   Vertical only, and never wider than the element: the nav bar is 64px tall so
   there is room above and below, whereas a wider overlay would reach across the
   4px gap and let each button steal its neighbour's taps.

   Stacked lists (footer columns, the mobile nav panel) get real min-height
   instead — there is nothing beside them to collide with, and honest box size
   beats an invisible overlay wherever it is affordable. */
@media (max-width: 860px) {
  .site-nav .actions .btn,
  .site-nav .brand { position: relative; }
  .site-nav .actions .btn::after,
  .site-nav .brand::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }
  .nav-toggle { width: 44px; height: 44px; }
  .footer-grid a,
  .site-nav .links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Small phones: at 390px CSS width the brand + toggle + both action buttons
   still added up to ~8px more than the viewport, so the page scrolled sideways.
   Tightening the gaps and button padding reclaims well over that without
   dropping either call to action. */
@media (max-width: 430px) {
  .site-nav { padding: 0 12px; gap: 8px; }
  .site-nav .actions { gap: 4px; }
  .site-nav .actions .btn { height: 32px; padding: 0 9px; font-size: 12.5px; }
  .site-nav .brand { font-size: 15.5px; }
  .site-nav .brand-mark { width: 24px; height: 24px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   Nothing in the app honoured this before: with the OS setting on, the pulsing
   eyebrow dot still ran a 2.5s loop forever. WCAG 2.3.3, and for people with
   vestibular disorders a looping animation is not a preference.

   .01ms rather than `none` on purpose — animationend / transitionend still
   fire, so any code waiting on one is not left hanging. iteration-count caps
   the infinite loops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}