/* 3OkefordsCan – site styles (plain CSS, no build step) */
:root {
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-800: #292524;
  --stone-900: #1c1917;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  color: var(--stone-900);
  background: var(--stone-50);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: 48rem; margin: 0 auto; padding-inline: 1.5rem; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 88dvh; overflow: hidden; color: #fff; background: #3b4a3a; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero::before { background: linear-gradient(to right, rgb(0 0 0 / .8), rgb(0 0 0 / .45), transparent); }
.hero::after  { background: linear-gradient(to top, rgb(0 0 0 / .7), transparent, rgb(0 0 0 / .3)); }
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 88dvh; padding-block: 2.5rem; }
.brand { font-size: 1.125rem; font-weight: 800; letter-spacing: -.025em; text-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.hero-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 3rem; }
.hero h1 {
  font-size: 1.875rem; font-weight: 800; line-height: 1.25; letter-spacing: -.025em;
  text-wrap: balance; text-shadow: 0 3px 3px rgb(0 0 0 / .2);
}
.hero-lede { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.625; color: rgb(255 255 255 / .9); text-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.hero-note { margin-top: 1.25rem; font-size: .875rem; color: rgb(255 255 255 / .75); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  width: fit-content; border-radius: 999px; font-weight: 600;
  transition: background-color .15s ease;
  box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn-light { margin-top: 2.5rem; padding: 1rem 2rem; background: #fff; color: var(--stone-900); font-weight: 700; box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
.btn-light:hover { background: var(--stone-100); }
.btn-teal { margin-top: 1.25rem; padding: .75rem 1.5rem; background: var(--teal-800); color: #fff; }
.btn-teal:hover { background: var(--teal-900); }
.btn-dark { margin-top: 1.25rem; padding: .875rem 1.75rem; background: var(--stone-900); color: #fff; }
.btn-dark:hover { background: var(--stone-800); }

.nudge { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .nudge { animation: nudge 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(35%); } }

/* ---------- Next steps ---------- */
.next { scroll-margin-top: 1rem; }
.next > .wrap { padding-block: 4rem; }
.next h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; }

.card { border: 1px solid var(--stone-200); border-radius: 1rem; background: #fff; padding: 1.5rem; box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.qr-card { margin-top: 2.5rem; text-align: center; }
.qr-card img { width: 11rem; height: 11rem; margin: 0 auto; flex-shrink: 0; }
.qr-card .qr-text { margin-top: 1.5rem; }
.qr-card .lead { font-size: 1.125rem; font-weight: 600; }
.muted { color: var(--stone-600); }
.qr-card .muted { margin-top: .5rem; }

.steps { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.steps h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.025em; }
.steps p { margin-top: .5rem; line-height: 1.625; color: var(--stone-600); }

.contact { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--stone-200); }
.contact p { font-size: 1.125rem; color: var(--stone-600); }

footer { border-top: 1px solid var(--stone-200); }
footer .wrap { padding-block: 1.5rem; font-size: .875rem; color: var(--stone-500); }

/* ---------- Larger screens ---------- */
@media (min-width: 40rem) {
  .hero-inner { padding-block: 3.5rem; }
  .hero-body { padding-block: 4rem; }
  .hero h1 { font-size: 3rem; line-height: 1.1; }
  .hero-lede { font-size: 1.25rem; }
  .btn-light { font-size: 1.125rem; }
  .next > .wrap { padding-block: 6rem; }
  .next h2 { font-size: 2.25rem; }
  .card { padding: 2rem; }
  .qr-card { display: flex; align-items: center; gap: 2rem; text-align: left; padding: 2rem; }
  .qr-card img { margin: 0; }
  .qr-card .qr-text { margin-top: 0; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps .card { padding: 1.5rem; }
}

/* Short screens (e.g. phones in landscape) */
@media (max-height: 640px) {
  .hero-inner { padding-block: 1.25rem; }
  .hero-body { padding-block: 1rem; }
  .hero h1 { font-size: 1.5rem; }
  .hero-lede { margin-top: .75rem; font-size: 1rem; }
  .btn-light { margin-top: 1.25rem; padding-block: .75rem; }
  .hero-note { margin-top: .75rem; }
}