/* The public marketing page. Colours come from tokens.css only.
   Layout follows the familiar pattern (logo left, nav right, hero, sections,
   footer) and keeps one primary action visible at every scroll position. */

.marketing { background: var(--bg); }
.site { max-width: 1120px; padding: 0 var(--s-6); margin: 0 auto; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Header: sticky, so "Get in touch" is always one tap away. */
.site-head { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.topnav { display: flex; align-items: center; gap: var(--s-5); min-height: 72px; }
.topnav .wordmark { color: var(--text); font-size: var(--fs-lg); text-decoration: none; min-height: 44px; }
.navlink { text-decoration: none; color: var(--text-muted); font-size: var(--fs-sm); padding: var(--s-3) 0; }
.navlink:hover { color: var(--text); }
.spacer { flex: 1; }
.signin-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.signin-link:hover { background: var(--surface-2); }
.theme-toggle { min-width: 44px; min-height: 44px; }
.btn-lg { min-height: 48px; padding: var(--s-3) var(--s-5); font-size: var(--fs-base); }

/* Hero */
.hero { padding: 88px var(--s-6) 72px; }
.hero h1 { font: 500 clamp(40px, 6vw, 72px)/1.06 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; margin: 0 0 var(--s-5); max-width: 16ch; }
.hero h1 em { color: var(--brand-text); }
.lede { font-size: var(--fs-lg); max-width: 60ch; color: var(--text-muted); line-height: 1.7; margin: 0 0 var(--s-6); }
.hero-actions { gap: var(--s-3); }
.proof { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.proof li { border: 1px solid var(--line); border-radius: var(--r-full); padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); color: var(--text-muted); background: var(--surface); }
.proof b { color: var(--text); }

/* Sections */
.band { padding: 80px var(--s-6); border-top: 1px solid var(--line); }
.section-intro { max-width: 640px; margin-bottom: var(--s-7); }
.section-intro h2, .contact-band h2 { font: 400 clamp(30px, 3.6vw, 46px)/1.12 Georgia, serif; letter-spacing: -.035em; margin: 0 0 var(--s-4); }
.section-intro > p:not(.eyebrow), .contact-band > p:not(.eyebrow) { color: var(--text-muted); line-height: 1.75; margin: 0; }
.note { color: var(--text-muted); margin: var(--s-6) 0 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.split .section-intro { margin: 0; }

/* 01: the automations, chunked into three groups, each in its own region. */
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.group { border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--surface); padding: var(--s-6); }
.group h3 { font-size: var(--fs-md); margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--brand-line); }
.autos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.autos b { display: block; font-size: var(--fs-base); }
.autos span { display: block; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; margin-top: var(--s-1); }

/* 02: four steps joined by one line. The step that needs a person stands out. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); position: relative; }
.flow::before { content: ''; position: absolute; top: 20px; left: 20px; right: 20px; height: 2px; background: var(--brand-line); }
.flow li { position: relative; }
.flow .dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--surface); border: 2px solid var(--brand-line); color: var(--brand-text); font-weight: 650; margin-bottom: var(--s-4); position: relative; }
.flow h3 { font-size: var(--fs-md); }
.flow p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; margin: 0; }
.flow-you .dot { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.flow-you h3 { color: var(--brand-text); }

/* 03: data */
.checks { list-style: none; margin: 0; padding: var(--s-6); display: grid; gap: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--surface); }
.checks li { padding-left: var(--s-6); position: relative; line-height: 1.6; }
.checks li::before { content: '✓'; position: absolute; left: 0; color: var(--ok-text); font-weight: 700; }

/* 04: getting started, with progress shown from the first step. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); counter-reset: step; }
.steps li { counter-increment: step; border-top: 4px solid var(--line-strong); padding-top: var(--s-4); }
.steps li::before { content: 'Step ' counter(step); display: block; font-size: var(--fs-xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-2); }
.steps h3 { font-size: var(--fs-md); }
.steps p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; margin: 0; }
.step-now { border-top-color: var(--brand) !important; }
.step-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 650; color: var(--brand-text); background: var(--brand-bg); border: 1px solid var(--brand-line); border-radius: var(--r-full); padding: 2px var(--s-3); margin-bottom: var(--s-3); }

/* 05: pricing, the one card on the page in the brand colour. */
.pricing-card { border: 2px solid var(--brand); background: var(--brand-bg); border-radius: var(--r-4); padding: var(--s-7); box-shadow: var(--shadow-2); }
.price { display: flex; flex-wrap: wrap; gap: var(--s-7); margin: var(--s-5) 0; }
.price b { display: block; font-size: 40px; letter-spacing: -.04em; line-height: 1.1; }
.price small { color: var(--text-muted); font-size: var(--fs-sm); }
.included { margin: 0 0 var(--s-6); padding-left: var(--s-5); color: var(--text-muted); line-height: 1.9; }

/* 06: questions */
.faq { display: grid; gap: var(--s-3); max-width: 760px; }
.faq details { border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--surface); }
.faq summary { cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 600; min-height: 48px; display: flex; align-items: center; }
.faq details p { margin: 0; padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); line-height: 1.7; }

/* Contact: the last thing a visitor sees, and the easiest to act on. */
.contact-band { padding: 88px var(--s-6); text-align: center; border-top: 1px solid var(--line); }
.contact-band > p:not(.eyebrow) { max-width: 58ch; margin-left: auto; margin-right: auto; }
.contact-actions { justify-content: center; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }

.site-foot { border-top: 1px solid var(--line); padding: var(--s-6) 0 var(--s-7); }
.site-foot .site { display: grid; gap: var(--s-3); }
.site-foot .wordmark { color: var(--text); text-decoration: none; }
.site-foot p { font-size: var(--fs-sm); color: var(--text-subtle); max-width: 70ch; margin: 0; }

@media (max-width: 960px) {
  .groups { grid-template-columns: 1fr; }
  .flow, .steps { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); }
  .flow::before { display: none; }
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 640px) {
  .site, .hero, .band, .contact-band { padding-left: var(--s-4); padding-right: var(--s-4); }
  .topnav { gap: var(--s-2); min-height: 64px; }
  .navlink { display: none; }
  .hero { padding-top: var(--s-8); padding-bottom: var(--s-7); }
  .lede { font-size: var(--fs-md); }
  .hero-actions .btn, .contact-actions .btn { flex: 1 1 100%; }
  .band { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .flow, .steps { grid-template-columns: 1fr; }
  .flow::before { display: block; top: 20px; bottom: 20px; left: 19px; right: auto; width: 2px; height: auto; }
  .flow li { padding-left: 56px; }
  .flow .dot { position: absolute; left: 0; top: 0; }
  .pricing-card, .group, .checks { padding: var(--s-5); }
}