/* Page layout for sourceflow.com, on top of the design system's tokens.css and
   sf- components. Values come from tokens only. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img { max-width: 100%; height: auto; }

.site-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: var(--space-2) var(--space-4); background: var(--surface-raised); color: var(--link); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.site-skip:focus { top: var(--space-4); outline: 2px solid var(--focus); outline-offset: 2px; }
.sf-logo:focus-visible, .sf-footer a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Container and sections */
.site-container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-8); }
.site-section { padding: var(--space-16) 0; }
.site-section + .site-section { border-top: 1px solid var(--line); }
.site-section--sunken { background: var(--surface-sunken); border-top: 1px solid var(--line); }
.site-section__head { max-width: var(--measure); margin-bottom: var(--space-12); }
.site-section__head > * + * { margin-top: var(--space-3); }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
.site-lead { color: var(--ink); max-width: var(--measure); }
.site-muted { color: var(--ink-muted); }
.label { text-transform: uppercase; }
.site-measure { max-width: var(--measure); }
.site-flow > * + * { margin-top: var(--space-4); }

/* Hero */
.site-hero { padding: var(--space-16) 0; }
.site-hero__inner { max-width: 880px; }
.site-hero__inner > * + * { margin-top: var(--space-6); }
.site-hero .sf-row { margin-top: var(--space-8); }

/* Interior page title */
.site-title { padding: var(--space-16) 0 var(--space-12); border-bottom: 1px solid var(--line); }
.site-title > .site-container > * + * { margin-top: var(--space-4); }

/* Card grid: hairline cards, no shadows */
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-8); }
.site-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); }
.site-card > * + * { margin-top: var(--space-3); }

/* Plain lists inside copy */
.site-list { margin: 0; padding-left: 1.25em; }
.site-list li + li { margin-top: var(--space-2); }

/* Services: a heading column beside its detail */
.site-service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); padding: var(--space-12) 0; border-top: 1px solid var(--line); }
.site-service:first-child { border-top: 0; padding-top: 0; }
.site-service__body > * + * { margin-top: var(--space-4); }

/* Definition rows for company facts */
.site-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-8); margin: 0; }
.site-facts dt { font-weight: 600; }
.site-facts dd { margin: 0; }

/* Contact */
.site-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.site-panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); }
.site-panel > * + * { margin-top: var(--space-6); }
.site-panel address { font-style: normal; }
.site-form { display: grid; gap: var(--space-6); }
.site-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); }
textarea.sf-input { min-height: 160px; padding-top: var(--space-3); padding-bottom: var(--space-3); resize: vertical; }

/* CTA band */
.site-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }

/* 404: the one centered layout */
.site-notfound { text-align: center; padding: var(--space-16) 0; }
.site-notfound > * + * { margin-top: var(--space-4); }
.site-notfound .sf-row { justify-content: center; margin-top: var(--space-8); }

.site-footer__tagline { margin: var(--space-3) 0 0; }
.site-footer__contact { margin: var(--space-2) 0 0; }

@media (max-width: 860px) {
  .site-service, .site-contact { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

@media (max-width: 640px) {
  .site-container, .sf-header__inner, .sf-footer__inner, .sf-footer__legal { padding-left: var(--space-4); padding-right: var(--space-4); }
  .site-section, .site-hero, .site-notfound { padding: 48px 0; }
  .site-title { padding: 48px 0 var(--space-8); }
  .display-xl { font-size: 40px; line-height: 44px; }
  .display-lg { font-size: 32px; line-height: 38px; }
  .site-panel { padding: var(--space-6); }
  .site-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-facts dd + dt { margin-top: var(--space-3); }
}

.site-more { margin-top: var(--space-8); }
.site-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sf-prose .site-list { margin-bottom: var(--space-4); }