/* The welcome page for sessionboard.football: the app's colours and fonts, nothing else. */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/oswald-latin.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/work-sans-latin.woff2) format('woff2'); }

:root {
  --turf-deep: #0f1d14; --turf: #2C6B44; --chalk: #F3EFE3; --ink: #152018; --amber: #D9A441; --paper: #FBF8F0; --paper-edge: #E4DCC6; --muted: #9db3a4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Work Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
h1, h2 { font-family: 'Oswald', sans-serif; text-transform: uppercase; line-height: 1.05; margin: 0; letter-spacing: 0.01em; }

/* Header */
.top { position: absolute; inset: 0 0 auto 0; z-index: 2; }
.top-in { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--chalk); }
.brand img { width: 40px; height: 40px; border-radius: 9px; }
.brand b { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.brand i { display: block; font-style: normal; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-top: 3px; }
.login { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--ink); background: var(--amber); padding: 10px 20px; border-radius: 8px; white-space: nowrap; }
.login:hover { background: #e6b65a; }

/* The opening */
.hero { background: linear-gradient(rgba(10, 22, 14, 0.62), rgba(10, 22, 14, 0.25) 45%, rgba(10, 22, 14, 0.5)), url(../img/pitch-bg.jpg) center / cover no-repeat, var(--turf-deep); color: var(--chalk); padding: 130px 0 0; text-align: center; overflow: hidden; }
.hero h1 { font-size: clamp(44px, 8vw, 96px); font-weight: 600; }
.hero .lead { font-size: clamp(18px, 2.2vw, 23px); max-width: 680px; margin: 18px auto 44px; color: #e6e1d2; }
.hero-pic { margin: 0 auto -6px; max-width: 1000px; width: 100%; border-radius: 12px 12px 0 0; box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 0; }

/* What it does */
.feature { padding: 88px 0; }
.feature + .feature { border-top: 1px solid var(--paper-edge); }
.feature-in { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.feature.flip .feature-text { order: 2; }
.feature img { border-radius: 10px; border: 1px solid var(--paper-edge); box-shadow: 0 18px 48px rgba(21, 32, 24, 0.16); }
.kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--turf); margin-bottom: 10px; }
.feature h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; margin-bottom: 18px; }
.feature p { margin: 0 0 14px; color: #33453A; }

/* Privacy and the maker */
.promise { background: var(--turf); color: var(--chalk); padding: 72px 0; text-align: center; }
.promise h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 600; margin-bottom: 14px; }
.promise p { max-width: 640px; margin: 0 auto; font-size: 19px; color: #e8f0ea; }
.maker { padding: 64px 0; text-align: center; }
.maker p { margin: 0 0 8px; font-size: 18px; }
.maker a { color: var(--turf); font-weight: 700; }

.foot { background: var(--turf-deep); color: var(--muted); font-size: 14px; padding: 26px 0; }
.foot-in { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.foot-in span { margin-right: auto; }
.foot a { text-decoration: none; } .foot a:hover { color: var(--chalk); }

/* Phones */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .brand b { font-size: 19px; } .brand i { font-size: 10px; } .brand img { width: 34px; height: 34px; }
  .login { padding: 9px 14px; font-size: 14px; }
  .hero { padding-top: 104px; }
  .feature { padding: 56px 0; }
  .feature-in { grid-template-columns: 1fr; gap: 26px; }
  .feature.flip .feature-text { order: 0; }
  .foot-in { gap: 14px 22px; }
}