/* Expensync marketing site. Plain CSS, no build step, no CDN.
   Shared by index.html and privacy.html so both read as one site.

   One centred column, one vertical rhythm. Everything lines up on the same
   axis - mixing container widths is what made the first pass look ragged. */

:root {
  --bg: #faf7f2;
  --ink: #17150f;
  --muted: #6b6559;
  --line: #e8e2d8;
  --card: #fffdfa;
  --accent: #2f6b4a;
  --accent-soft: #cdeadb;

  --col: 1080px;        /* the one content width */
  --gutter: 24px;
  --rhythm: 108px;      /* space between major sections */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
        Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Horizontal only: these elements are also the sections, and a shorthand
   here outranks `section` and silently zeroes the vertical rhythm. */
.wrap {
  width: 100%; max-width: var(--col); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

a { color: inherit; }
img { max-width: 100%; }

/* ---------- header ---------- */

header.site {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
header.site.scrolled { border-bottom-color: var(--line); }

.bar { display: flex; align-items: center; gap: 12px; padding: 13px 0; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 650; text-decoration: none; letter-spacing: -0.015em;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }

.bar nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.bar nav a.text { color: var(--muted); text-decoration: none; font-size: 15px; }
.bar nav a.text:hover { color: var(--ink); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--ink);
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { transform: translateY(-1px); opacity: .92; }
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.btn.big { padding: 16px 28px; font-size: 16.5px; }

/* ---------- type ---------- */

h1 {
  margin: 0 auto;
  font-size: clamp(40px, 6.4vw, 74px);
  line-height: 1.04; letter-spacing: -0.035em; font-weight: 700;
  max-width: 22ch;            /* wide enough to fill the column, not strand it */
}

h2 {
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
  margin: 0;
}

h3 { font-size: 18.5px; letter-spacing: -0.015em; font-weight: 650; margin: 0 0 8px; }

.mark { background: linear-gradient(transparent 60%, var(--accent-soft) 60%); padding: 0 .08em; }

.lede { font-size: clamp(17px, 1.9vw, 19.5px); color: var(--muted); }
.muted { color: var(--muted); }

.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}

/* Every section opens the same way: eyebrow, heading, optional lede,
   all centred on the one axis. */
.head { text-align: center; max-width: 62ch; margin: 0 auto 48px; }
.head .lede { margin: 16px auto 0; }

/* ---------- rhythm ---------- */

section { padding-bottom: var(--rhythm); }
section[id] { scroll-margin-top: 88px; }   /* clear the sticky header */

/* ---------- hero ---------- */

.hero { padding-top: 92px; text-align: center; }
.hero .lede { margin: 26px auto 0; max-width: 56ch; }

.cta-row {
  margin-top: 34px;
  display: flex; align-items: center; justify-content: center;
  gap: 16px 24px; flex-wrap: wrap;
}

.proof { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.proof span { font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.proof svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 2.2; flex: none; }

/* ---------- screenshots ---------- */

.shots {
  display: flex; gap: 20px; justify-content: center;
  margin: 64px auto var(--rhythm);
  padding: 4px var(--gutter) 10px;
  max-width: calc(var(--col) + 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.shots::-webkit-scrollbar { height: 0; }
.shots figure { margin: 0; flex: 0 0 auto; width: 232px; scroll-snap-align: center; }
.shots img {
  width: 100%; height: auto; display: block; border-radius: 24px;
  border: 1px solid var(--line); background: var(--card);
  box-shadow: 0 20px 48px -26px rgba(23,21,15,.5);
}
.shots figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- three pillars ---------- */

.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
.split p { margin: 0; color: var(--muted); font-size: 15.5px; }
.split svg {
  width: 28px; height: 28px; margin-bottom: 16px; display: block;
  stroke: var(--ink); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- capability lists ---------- */

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 36px; }
.cols ul { list-style: none; margin: 0; padding: 0; }
.cols li {
  position: relative; padding-left: 24px; margin-bottom: 10px;
  font-size: 15.5px; color: var(--muted);
}
.cols li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 11px; height: 6px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}

/* ---------- panel ---------- */

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 24px; padding: 44px 40px; text-align: center;
}
.panel h2 { font-size: clamp(23px, 2.8vw, 31px); }
.panel p { margin: 14px auto 0; max-width: 58ch; color: var(--muted); }

/* ---------- faq ---------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 2px; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 16.5px;
  list-style: none; display: flex; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; color: var(--muted);
  font-weight: 400; font-size: 21px; line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; max-width: 64ch; }

/* ---------- closing ---------- */

.closing { text-align: center; }
.closing h2 { margin-bottom: 28px; }
.req { margin: 20px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---------- footer ---------- */

footer.site { border-top: 1px solid var(--line); padding: 28px 0 48px; }
.foot {
  display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: center;
  font-size: 13.5px; color: var(--muted);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .spacer { margin-left: auto; }

/* ---------- legal pages ---------- */

.legal { padding-top: 64px; padding-bottom: var(--rhythm); max-width: 760px; }
.legal h1 { font-size: clamp(34px, 5vw, 48px); max-width: none; margin: 0; text-align: left; }
.legal > p.muted:first-of-type { margin-top: 10px; }
.legal h2 { font-size: 22px; margin: 42px 0 12px; letter-spacing: -0.02em; }
.legal p, .legal li { font-size: 16.5px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 10px; }
.legal strong { font-weight: 650; }

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  :root { --rhythm: 80px; }
  .split, .cols { grid-template-columns: 1fr 1fr; }
  .bar nav a.text { display: none; }
  .hero { padding-top: 60px; }
  .shots { justify-content: flex-start; }
}

@media (max-width: 580px) {
  :root { --rhythm: 64px; --gutter: 20px; }
  .split, .cols { grid-template-columns: 1fr; }
  .panel { padding: 30px 22px; }
  .head { margin-bottom: 34px; }
  .cta-row { gap: 18px; }
}