@font-face {
  font-family: Barlow;
  src: url('/assets/fonts/Barlow-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url('/assets/fonts/Barlow-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --pine: #173f35;
  --canvas: #f3f4ee;
  --secondary: #5b695e;
  --divider: #d7dfd4;
  --action: #b94b24;
  --gold: #f2c166;
  --disabled: #e0e5dc;
  font-family: Barlow, system-ui, sans-serif;
  color: var(--pine);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
::selection { background: var(--gold); color: var(--pine); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-underline-offset: .25em; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
.shell { width: min(100% - 4rem, 70rem); margin-inline: auto; }
.preview-notice {
  padding: .75rem 2rem;
  color: var(--pine);
  background: var(--gold);
  font-size: .875rem;
  line-height: 1.5;
  text-align: center;
  font-weight: 600;
}
.preview-notice span { font-weight: 400; margin-left: .75rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 2rem; }
.brand { display: block; width: 15.5rem; flex-shrink: 0; }
nav, .site-footer div { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
nav a, .site-footer a { padding-block: .75rem; font-size: 1rem; font-weight: 600; text-decoration: none; }
nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 5px; border-radius: 2px; }
.skip-link { position: fixed; z-index: 2; top: .75rem; left: 1rem; padding: 1rem; background: white; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.hero { display: grid; grid-template-columns: 1.12fr 1fr; gap: 4rem; padding-block: 3rem 5rem; align-items: center; }
.copy-marker { display: block; color: var(--secondary); font-size: .875rem; line-height: 1.5; font-weight: 600; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; margin-block: 1rem 1.5rem; overflow-wrap: break-word; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 800; margin-top: .75rem; }
.intro, .prose { font-size: 1.125rem; line-height: 1.6; max-width: 65ch; }
.intro { max-width: 42ch; }
.prose { color: var(--secondary); }
.prose a { overflow-wrap: anywhere; }
.prose p + p, .intro p + p { margin-top: 1rem; }
.download { display: flex; align-items: flex-start; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.availability { margin: 0; color: var(--pine); font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 3rem; padding: .9rem 1.5rem; border: 0; border-radius: .75rem; background: var(--action); color: white; font-weight: 600; font-size: 1.125rem; line-height: 1.4; text-align: center; text-decoration: none; }
.button:disabled { background: var(--disabled); color: var(--secondary); cursor: not-allowed; }
.brand-panel { aspect-ratio: 1; background: var(--pine); border-radius: 1.5rem; display: grid; place-items: center; }
.brand-panel img { width: 60%; }
.explanation { padding-block: 3rem 4rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; border-top: 1px solid var(--divider); scroll-margin-top: 2rem; }
.explanation-copy .prose { margin-top: 1.25rem; }
.learning-paths { margin: 1.5rem 0 0; padding-left: 1.25rem; font-size: 1.125rem; line-height: 1.6; font-weight: 600; }
.learning-paths li + li { margin-top: .35rem; }
.learning-paths li::marker { color: var(--action); }
.product-screenshot { margin: 0; display: grid; justify-items: center; gap: .75rem; min-width: 0; }
.product-screenshot picture { display: block; width: 100%; max-width: 28rem; }
.product-screenshot img { width: 100%; border-radius: 1rem; box-shadow: 0 .75rem 2rem rgb(23 63 53 / 10%); }
.product-screenshot.share-card picture { max-width: 22rem; }
.document { max-width: 46rem; padding-block: 3rem 6rem; }
.document h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
.policy h2 { color: var(--pine); font-size: clamp(1.5rem, 3vw, 1.875rem); margin-block: 2.5rem 1rem; }
.document .button { margin-top: 2rem; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--divider); font-size: 1rem; }

@media (max-width: 48rem) {
  .shell { width: calc(100% - 2.5rem); }
  .site-header { flex-direction: column; align-items: flex-start; gap: .75rem; padding-block: 1.5rem; }
  nav { gap: 1.5rem; }
  .preview-notice { padding: .75rem 1.25rem; text-align: left; }
  .preview-notice span { display: block; margin: 0; }
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 1.5rem 3rem; }
  .brand-panel { aspect-ratio: 1.25; }
  .brand-panel img { width: 46%; }
  .explanation { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.5rem; }
  .product-screenshot.tablet picture { max-width: 22rem; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .document { padding-block: 2rem 4rem; }
}