/* GAP IT's website: the front page, terms and privacy. Royal blue, white and
   red, from the New Zealand flag; Bricolage for headings, the phone's own
   font for reading. Shared by every page; each page adds its own. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-display: swap;
  src: url('/home/bricolage-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-weight: 600;
  font-display: swap;
  src: url('/home/bricolage-600.woff2') format('woff2');
}

:root {
  --ink: #0e1f57;
  --blue: #1f44b8;
  --blue-bright: #2f5ae0;
  --blue-soft: #e8eeff;
  --red: #e3262b;
  --red-dark: #c41d22;
  --soft: #f4f6fb;
  --line: #dde3f0;
  --muted: #4a5578;
  --white: #ffffff;
  --on-dark: #ffffff;
  --on-dark-dim: rgb(255 255 255 / 0.8);
  --sky: #9db5ff;
  --shadow: 0 2px 6px rgb(14 31 87 / 0.06), 0 24px 48px -20px rgb(14 31 87 / 0.32);
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step-0: 1.05rem;
  --step-1: 1.25rem;
  --step-2: 1.55rem;
  --step-3: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --step-4: clamp(2.5rem, 1.3rem + 4.6vw, 4.8rem);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 var(--step-0)/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.12; }
p { margin: 0; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.kicker { font: 700 0.8rem/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 38rem; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 99px; font: 700 1rem/1 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, background 0.15s; }
.button:hover { transform: translateY(-1px); }
.button.go { background: var(--red); color: var(--white); box-shadow: 0 10px 24px -10px rgb(227 38 43 / 0.7); }
.button.go:hover { background: var(--red-dark); }
.button.light { background: var(--white); color: var(--ink); }
.button.ghost { border-color: rgb(255 255 255 / 0.65); color: var(--on-dark); background: transparent; }
.button.ghost:hover { background: rgb(255 255 255 / 0.12); }
.button.outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.button.small { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }

/* The bar along the top: the name, the way round, signing in and starting. */
.top { position: sticky; top: 0; z-index: 20; background: rgb(14 31 87 / 0.92); backdrop-filter: blur(10px); color: var(--on-dark); padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.mark { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.mark svg.tile { width: 34px; height: 34px; flex: none; }
.wordmark { display: inline-flex; align-items: center; white-space: nowrap; font: 800 1.35rem/1 var(--display); letter-spacing: -0.01em; }
.wordmark svg { width: 0.9em; height: 1em; margin: 0 0.04em; overflow: visible; }
.top nav { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 0.97rem; }
.top nav a { color: var(--on-dark-dim); text-decoration: none; }
.top nav a:hover { color: var(--on-dark); }
.top .actions { display: flex; align-items: center; gap: 10px; }
.top .signin { color: var(--on-dark); font-weight: 600; text-decoration: none; padding: 10px 6px; }
@media (max-width: 900px) { .top nav { display: none; } .top .actions { margin-left: auto; } }
@media (max-width: 380px) { .top .signin { display: none; } }

footer.foot { background: var(--ink); color: var(--on-dark-dim); padding-block: 48px 56px; font-size: 0.92rem; }
footer.foot .wrap { display: grid; gap: 18px; }
footer.foot .line { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
footer.foot a { color: var(--on-dark); }
footer.foot .mark { color: var(--on-dark); }
footer.foot .credits { font-size: 0.8rem; line-height: 1.6; color: rgb(255 255 255 / 0.62); }
footer.foot .credits a { color: rgb(255 255 255 / 0.75); }

/* Terms and privacy: easy reading. */
.legal { padding-block: 56px 80px; }
.legal .wrap { max-width: 46rem; }
.legal h1 { font-size: var(--step-3); margin-bottom: 8px; }
.legal .updated { color: var(--muted); margin-bottom: 28px; }
.legal h2 { font-size: var(--step-2); margin: 36px 0 10px; }
.legal p, .legal li { color: #23305f; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.legal .summary { background: var(--blue-soft); border-radius: 18px; padding: 18px 20px; margin-bottom: 8px; }