/* xpeazy.com: one stylesheet for the landing page and its 404.
   Tokens by name (Forge, DESIGN-LANGUAGE.md 0.1): every colour, size, space, radius, duration and shadow is a custom property declared in :root, and the rules below
   write the name. scripts/tests/site_literals.test.mjs holds that at zero for this file; scripts/tests/site_contrast.test.mjs computes every pair; scripts/tests/site_states.test.mjs
   holds the eight states of each control; `npm run site:widths` loads both pages at 320, 375, 768, 1024, 1280 and 1440.
   One theme, by design: the ground is the Xpeazy green and does not follow the visitor's light or dark setting (color-scheme: dark says so to the browser).
   The ramp (--green to --mint) and the ladders (--fs, --sp, --r, --dur) have the same names and values in apps/xpeazy-dl/public/site.css; a test holds the two equal. */

:root {
  color-scheme: dark;

  /* the Xpeazy greens. --green is the mark's tile and a fill that carries no text; a green fill that carries white text is --green-fill (6.14:1) */
  --green: #1F8B4C;
  --green-fill: #17703C;
  --green-deep: #14663A;
  --green-dark: #0E3D24;
  --green-darker: #092B19;
  --mint: #4ADE80;
  --white: #FFFFFF;
  --black: #000000;

  /* roles on this page's ground */
  --fg: #EAF7EF;
  --fg-2: #9CC4AB;
  --ground-a: var(--green-dark);
  --ground-b: var(--green-darker);
  --accent: var(--mint);
  --btn-bg: var(--white);
  --btn-fg: var(--green-deep);
  --btn-bg-hover: #F2F7F4;
  --btn-bg-active: #DCE4DE;
  --disabled-bg: #1D5436;
  --disabled-fg: #9CC4AB;
  --focus: var(--mint);

  /* washes: a ramp colour at an alpha, named <colour>-a<permille>. The only place an rgba() is written */
  --mint-a130: rgba(74, 222, 128, .13);
  --mint-a140: rgba(74, 222, 128, .14);
  --green-a180: rgba(31, 139, 76, .18);
  --white-a45: rgba(255, 255, 255, .045);
  --black-a300: rgba(0, 0, 0, .3);
  --line: var(--mint-a140);
  --surface: var(--white-a45);

  /* type: one ladder, one stack */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-64: 64px;
  --fs-display: clamp(32px, 6vw, 58px);
  --fs-lede: clamp(16px, 2vw, 18px);
  --lh-tight: 1.1; --lh-body: 1.6;
  --track-display: -.02em; --track-tight: -.015em; --track-word: .01em; --track-caps: .18em;

  /* space: one 4-point ladder (2 and 6 for fine work) */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-36: 36px; --sp-40: 40px; --sp-44: 44px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; --sp-72: 72px; --sp-80: 80px; --sp-96: 96px;
  --measure: 960px;
  --target: 24px;           /* the smallest a control may be (WCAG 2.2 SC 2.5.8) */
  --control: 44px;          /* a control's height: the primary action and every input take the largest (Forge 1.3) */

  /* shape: a closed set */
  --r-2: 2px; --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-20: 20px; --r-24: 24px; --r-pill: 999px; --r-round: 50%;

  /* elevation: flat everywhere; the one raised element of a view is its primary action */
  --elev-0: none;
  --elev-raised: 0 14px 40px var(--black-a300);

  /* motion: named durations and easings; transform and opacity only */
  --dur-fast: .2s; --dur-base: .3s; --dur-slow: .55s;
  --delay-first: .05s; --delay-step: .09s;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; position: relative; overflow-x: clip;
  font-family: var(--sans); line-height: var(--lh-body);
  background: linear-gradient(180deg, var(--ground-a) 0%, var(--ground-b) 100%);
  color: var(--fg); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
img, svg { max-width: 100%; }

/* focus: one ring for every control, 3px, outside, in a colour that is 3:1 against the ground (the mint on the green is 8:1) */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-4); }

.glow {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 20% 8%, var(--mint-a130), transparent 65%),
    radial-gradient(760px 460px at 85% 85%, var(--green-a180), transparent 65%);
}
.wrap { position: relative; max-width: var(--measure); margin: 0 auto; padding: 0 var(--sp-24); }

/* hero */
header.hero { text-align: center; padding: var(--sp-96) 0 var(--sp-64); }
.mark { display: block; margin-inline: auto; width: 92px; height: 92px; }
.word { font-size: var(--fs-32); font-weight: 800; letter-spacing: var(--track-word); margin-top: var(--sp-16); }
h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: var(--track-display); line-height: var(--lh-tight); margin: var(--sp-24) auto var(--sp-16); max-width: 760px; }
h1 em { font-style: normal; color: var(--accent); }
.sub { font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--fg-2); max-width: 620px; margin: 0 auto var(--sp-36); }

/* the primary action: a link that is drawn as a button. The one raised element of the page. */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: var(--control);
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; font-weight: 800; font-size: var(--fs-16);
  padding: var(--sp-16) var(--sp-32); border-radius: var(--r-12); box-shadow: var(--elev-raised);
  transition: transform var(--dur-fast) var(--ease);
}
.cta small { font-weight: 600; font-size: inherit; color: inherit; }
.cta:hover { transform: translateY(-1px); background: var(--btn-bg-hover); }
.cta:active { transform: translateY(0); background: var(--btn-bg-active); }
.cta[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-fg); box-shadow: var(--elev-0); pointer-events: none; cursor: not-allowed; }

.nocard { margin-top: var(--sp-24); display: flex; gap: var(--sp-8) var(--sp-24); justify-content: center; flex-wrap: wrap; }
.nocard span { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); font-weight: 600; }
.nocard i { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--accent); }

/* three steps */
section.steps { padding: var(--sp-24) 0 var(--sp-72); }
.steps h2 { text-align: center; font-size: var(--fs-24); margin-bottom: var(--sp-32); letter-spacing: var(--track-tight); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-16); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-16); padding: var(--sp-24); min-width: 0; }
.step .n {
  width: 36px; height: 36px; border-radius: var(--r-8); background: var(--green-fill); color: var(--white);
  display: grid; place-items: center; font-weight: 800; font-size: var(--fs-16); margin-bottom: var(--sp-16);
}
.step b { display: block; font-size: var(--fs-16); margin-bottom: var(--sp-8); }
.step p { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--fg-2); }

/* the employer line */
section.employer { border-top: 1px solid var(--line); padding: var(--sp-56) 0 var(--sp-64); text-align: center; }
.employer h2 { font-size: var(--fs-24); letter-spacing: var(--track-tight); margin-bottom: var(--sp-12); }
.employer p { color: var(--fg-2); font-size: var(--fs-15); line-height: var(--lh-body); max-width: 560px; margin: 0 auto; }
/* a link inside a sentence is never told from the words by colour alone: it is underlined */
.employer a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.employer a:hover { text-decoration-thickness: 2px; }
.employer a:active { color: var(--fg); }

footer { border-top: 1px solid var(--line); padding: var(--sp-24); text-align: center; font-size: var(--fs-13); color: var(--fg-2); }
footer a { display: inline-block; padding-block: var(--sp-4); min-height: var(--target); color: var(--fg-2); }
footer a:hover { color: var(--fg); }
footer a:active { color: var(--accent); }

/* the 404 */
main.nf { position: relative; max-width: 460px; margin: 0 auto; padding: var(--sp-48) var(--sp-24); text-align: center; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nf .mark { width: 72px; height: 72px; }
.nf .code { margin-top: var(--sp-24); font-size: var(--fs-13); font-weight: 700; letter-spacing: var(--track-caps); color: var(--fg-2); }
.nf h1 { font-size: clamp(26px, 5vw, 36px); letter-spacing: var(--track-display); margin: var(--sp-8) 0 var(--sp-12); }
.nf p { color: var(--fg-2); font-size: var(--fs-15); line-height: var(--lh-body); }
.nf .cta { margin-top: var(--sp-28); padding: var(--sp-12) var(--sp-28); font-size: var(--fs-15); }

/* one orchestrated load moment; still and instant for people who ask for less motion */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(10px); animation: rv var(--dur-slow) var(--ease) forwards; }
  .rv1 { animation-delay: var(--delay-first); }
  .rv2 { animation-delay: calc(var(--delay-first) + var(--delay-step)); } .rv3 { animation-delay: calc(var(--delay-first) + var(--delay-step) * 2); }
  .rv4 { animation-delay: calc(var(--delay-first) + var(--delay-step) * 3); } .rv5 { animation-delay: calc(var(--delay-first) + var(--delay-step) * 4); }
  .rv6 { animation-delay: calc(var(--delay-first) + var(--delay-step) * 5); }
  @keyframes rv { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  .cta:hover { transform: none; }
}