/* ==========================================================================
   Tempo — marketing site styles
   Vanilla CSS, no build step, no external dependencies.
   Theme tokens match the demo app so the look stays consistent.
   ========================================================================== */

:root{
  --bg:#f6f5fd; --surface:#ffffff; --surface-alt:#eeedf7; --border:#e4e1f0;
  --text:#2d2c40; --text-muted:#6c6b82;
  --primary:#6a70cf; --primary-hover:#595fc0;
  --accent:#b9a9ef; --accent-hover:#6f63b8;
  --danger:#d56b78; --warning:#cf9a4a; --success:#4aa07d;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 3px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.05);
  --maxw:1100px;

  /* Spacing scale — keeps a consistent visual rhythm. */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

h1,h2,h3{ line-height:1.2; margin:0 0 var(--sp-4); letter-spacing:-.02em; }
h1{ font-size:clamp(2.1rem, 5vw, 3.2rem); font-weight:800; }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:700; }
h3{ font-size:1.2rem; font-weight:650; }
p{ margin:0 0 var(--sp-4); }

a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-hover); text-decoration:underline; }

/* Visible, consistent focus styles for keyboard users. */
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset:2px;
  border-radius:6px;
}

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

.muted{ color:var(--text-muted); }
.center{ text-align:center; }

/* Skip link for keyboard / screen-reader users. */
.skip-link{
  position:absolute;
  left:var(--sp-4);
  top:-3rem;
  background:var(--surface);
  color:var(--text);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  z-index:100;
  transition:top .15s ease;
}
.skip-link:focus{ top:var(--sp-4); text-decoration:none; }

/* ------------------------------ Buttons --------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:.7rem 1.25rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font:inherit;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease,
             color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-hover); color:#fff; box-shadow:0 6px 18px color-mix(in srgb, var(--primary) 32%, transparent); }

.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ background:var(--surface-alt); color:var(--text); }

.btn-accent{ background:var(--accent); color:var(--text); }
.btn-accent:hover{ background:var(--accent-hover); color:#fff; box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }

.btn-lg{ padding:.9rem 1.6rem; font-size:1.05rem; }

/* Inline "link arrow" style (e.g. Launch demo →). */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:600;
}
.link-arrow svg{ transition:transform .15s ease; }
.link-arrow:hover{ text-decoration:none; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ------------------------------- Badge ---------------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .7rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  background:var(--surface-alt);
  color:var(--text-muted);
  border:1px solid var(--border);
}
.badge-accent{
  background:color-mix(in srgb, var(--accent) 14%, #fff);
  color:var(--accent-hover);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
}
.badge-primary{
  background:color-mix(in srgb, var(--primary) 12%, #fff);
  color:var(--primary-hover);
  border-color:color-mix(in srgb, var(--primary) 28%, transparent);
}
.badge .dot{ width:.45rem; height:.45rem; border-radius:50%; background:currentColor; }

/* ------------------------------- Header --------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  min-height:64px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  font-size:1.15rem;
  color:var(--text);
}
.brand:hover{ text-decoration:none; color:var(--text); }
.brand .logo{ width:32px; height:32px; display:block; flex:none; }
.brand .wordmark{ letter-spacing:-.02em; }

.site-nav{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}
.site-nav a:not(.btn){
  color:var(--text-muted);
  font-weight:550;
  padding:.45rem .65rem;
  border-radius:var(--radius-sm);
}
.site-nav a:not(.btn):hover{ color:var(--text); background:var(--surface-alt); text-decoration:none; }

/* ------------------------------- Hero ----------------------------------- */
.hero{
  position:relative;
  padding:var(--sp-9) 0 var(--sp-8);
  background:
    radial-gradient(60rem 30rem at 75% -10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
    radial-gradient(50rem 28rem at 5% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
}
.hero-inner{ max-width:46rem; }
.hero h1{ margin-bottom:var(--sp-5); }
.hero .lead{ font-size:1.2rem; color:var(--text-muted); margin-bottom:var(--sp-6); max-width:40rem; }
.hero .actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent-hover);
  margin-bottom:var(--sp-4);
}
.eyebrow .badge-dot{
  width:.5rem; height:.5rem;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ------------------------------ Sections -------------------------------- */
.section{ padding:var(--sp-8) 0; }
.section-head{ max-width:42rem; margin-bottom:var(--sp-7); }
.section-head.center{ margin-inline:auto; }

/* ---------------------------- Product cards ----------------------------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-5);
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(16,24,40,.08), 0 18px 40px rgba(16,24,40,.10);
  border-color:color-mix(in srgb, var(--primary) 30%, var(--border));
}
.card .card-icon{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:var(--surface-alt);
  color:var(--primary);
  flex:none;
}
.card h3{ margin:0; }
.card p{ margin:0; color:var(--text-muted); }
.card .card-actions{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-4);
  padding-top:var(--sp-2);
}

/* --------------------------- Feature strip ------------------------------ */
.feature-strip{ background:var(--surface-alt); border-block:1px solid var(--border); }
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-6);
}
.feature{ display:flex; flex-direction:column; gap:var(--sp-3); }
.feature .feature-icon{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--accent-hover);
}
.feature h3{ margin:0; font-size:1.1rem; }
.feature p{ margin:0; color:var(--text-muted); font-size:.97rem; }

/* ----------------------------- Feature list ----------------------------- */
.feature-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-4) var(--sp-6);
}
.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  color:var(--text-muted);
}
.feature-list li strong{ color:var(--text); font-weight:600; }
.feature-list .check{
  flex:none;
  width:24px; height:24px;
  margin-top:.15rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 16%, #fff);
  color:var(--accent-hover);
}

/* ------------------------- Video placeholder ---------------------------- */
.video-slot{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:
    radial-gradient(40rem 20rem at 70% -20%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    linear-gradient(160deg, var(--surface-alt), color-mix(in srgb, var(--primary) 6%, var(--surface-alt)));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-4);
  text-align:center;
}
.video-slot .play-btn{
  width:84px; height:84px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface);
  color:var(--primary);
  box-shadow:0 8px 24px rgba(16,24,40,.18);
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.video-slot:hover .play-btn{
  transform:scale(1.06);
  color:var(--primary-hover);
  box-shadow:0 12px 30px rgba(79,107,237,.30);
}
.video-slot .play-btn svg{ margin-left:5px; } /* optically centre the triangle */
.video-slot .video-label{
  font-weight:600;
  color:var(--text-muted);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  padding:.3rem .8rem;
  border-radius:999px;
  font-size:.9rem;
}

/* ------------------------------ Callout --------------------------------- */
.callout{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--sp-7);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
}
.callout .callout-text{ max-width:34rem; }
.callout h2{ margin-bottom:var(--sp-2); }
.callout p{ margin:0; color:var(--text-muted); }
.callout .actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* --------------------------- Back / nav links --------------------------- */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--text-muted);
  font-weight:600;
  margin-bottom:var(--sp-5);
}
.back-link:hover{ color:var(--text); text-decoration:none; }
.back-link svg{ transition:transform .15s ease; }
.back-link:hover svg{ transform:translateX(-3px); }

/* ------------------------------- Footer --------------------------------- */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--surface);
  padding:var(--sp-7) 0;
  margin-top:var(--sp-8);
}
.site-footer .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}
.site-footer .foot-brand{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--text); }
.site-footer .foot-brand .logo{ width:24px; height:24px; }
.site-footer p{ margin:0; color:var(--text-muted); font-size:.92rem; }
.site-footer .foot-note{ font-size:.85rem; }

/* ---------------------------- Responsive -------------------------------- */
@media (max-width:820px){
  .product-grid{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .feature-list{ grid-template-columns:1fr; }
  .hero{ padding:var(--sp-8) 0 var(--sp-7); }
}

@media (max-width:560px){
  .site-nav{ gap:.15rem; }
  .site-nav a:not(.btn){ padding:.4rem .45rem; font-size:.92rem; }
  .site-nav .btn{ padding:.55rem .8rem; }
  .hero .actions .btn,
  .callout .actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* Hide secondary nav text links on very small screens; keep CTA + logo. */
@media (max-width:430px){
  .site-nav .nav-link{ display:none; }
}

/* ------------------------- Reduced motion ------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ----------------------------- Integrations ---------------------------- */
.integration-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);
  margin-top:var(--sp-6);
}
@media (max-width:820px){ .integration-grid{ grid-template-columns:1fr; } }
.integration-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-5);
  box-shadow:var(--shadow);
}
.int-logo{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 .9rem; border-radius:9px;
  font-weight:800; letter-spacing:-.01em; font-size:1rem;
  margin-bottom:var(--sp-3);
}
.int-logo.xero{ background:#e7f4fb; color:#0f97cf; }
.int-logo.payhero{ background:#e8f6ef; color:#159b67; }
.int-logo.excel{ background:#e9f3ec; color:#1c7a43; }
.integration-card h3{ margin-bottom:var(--sp-2); }
.integration-card p{ color:var(--text-muted); margin:0; font-size:.95rem; }
.integration-note{ margin-top:var(--sp-5); color:var(--text-muted); font-size:.95rem; }

/* --------------------------- Platforms (web + phone) ------------------- */
.platforms{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--sp-7);
  align-items:center;
}
@media (max-width:820px){ .platforms{ grid-template-columns:1fr; gap:var(--sp-6); } }
.platform-visual svg{ width:100%; height:auto; display:block; }
.platform-points{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-3); }
.platform-points li{ display:flex; gap:.6rem; align-items:flex-start; }
.platform-points .check{
  flex:none; width:20px; height:20px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--primary) 14%, #fff); color:var(--primary); margin-top:2px;
  font-size:.7rem; font-weight:800;
}
/* device-visual fills (var() can't be used in SVG presentation attributes) */
.platform-visual .dv-screen{ fill:var(--surface); stroke:var(--border); stroke-width:2; }
.platform-visual .dv-alt{ fill:var(--surface-alt); }
.platform-visual .dv-border{ fill:var(--border); }
.platform-visual .dv-primary{ fill:var(--primary); }
.platform-visual .dv-accent{ fill:var(--accent); }
.platform-visual .dv-muted{ fill:var(--text-muted); }