/* W3Schools app pages (v2 design) — shared base: fonts, reset, variables, top nav.
   Fonts are self-hosted in /adventure/fonts/ (extracted from the v2 design files). */

@font-face {
  font-family: "PS2P";
  src: url(fonts/ps2p.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "SMono";
  src: url(fonts/smono-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SMono";
  src: url(fonts/smono-700.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #16181d;
  --muted: #6e6e73;
  --green: #04aa6d;
  --gold: #f5c44e;
  --sky: #a3cffb;
  --paper: #fff;
  --soft: #f5f5f7;
  --line: #e4e4e9;
  --dark: #1e2029;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "SMono", monospace;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
/* No overflow-x here: w3.css and lib/w3schools/main.css already set
   "overflow: hidden scroll" on html, so clipping on body as well made body a
   second scroll container - which is what produced the double scrollbar. */
img {
  image-rendering: pixelated;
}
.ps {
  font-family: "PS2P";
  text-transform: uppercase;
  line-height: 1.75;
}
.eyebrow {
  font-family: "PS2P";
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--green);
  text-transform: uppercase;
}

/* ---------- cross-page link (index <-> support) ----------
   Both pages now use the standard W3Schools top nav, so the custom bar that
   used to carry these links is gone. This sits at the end of the content,
   just above the site footer. */
.pagelink {
  margin: 70px 0 10px;
  text-align: center;
}
.pagelink-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px 14px 18px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(22, 24, 29, 0.05);
  font-family: "SMono", monospace;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.12s;
}
.pagelink-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 rgba(22, 24, 29, 0.05);
}
.pagelink-btn img {
  width: 42px;
  flex-shrink: 0;
}
.pagelink-meta {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
/* Variant for when the block sits on the dark CTA band rather than on paper:
   same white card, but a shadow dark enough to read against the dark ground. */
.pagelink-on-dark .pagelink-btn {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
}
.pagelink-on-dark .pagelink-btn:hover {
  color: var(--ink);
  background: #fff;
  border-color: var(--green);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
}
.pagelink-on-dark .pagelink-meta {
  color: #a6abb8;
}
@media (max-width: 560px) {
  .pagelink-btn {
    font-size: 13.5px;
    padding: 12px 18px 12px 14px;
  }
}
/* ---------- features ---------- */
#features {
  background: var(--soft);
  padding: 130px 0 140px;
}
.featgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  margin-top: 60px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 34px 28px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 rgba(22, 24, 29, 0.06);
}
.card .ic {
  height: 56px;
  display: flex;
  align-items: center;
}
.card .ic img {
  max-height: 56px;
}
.card .ic .ictext {
  font-family: "PS2P";
  font-size: 15px;
  color: var(--green);
}
.card h3 {
  font-family: "PS2P";
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 20px;
  line-height: 1.8;
}
.card p {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
.card .imgbox {
  background: var(--soft);
  border-radius: 8px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps {
  max-width: 640px;
  margin: 56px auto 0;
  text-align: left;
  display: grid;
  gap: 44px;
}
.step {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}
.step .n {
  font-family: "PS2P";
  font-size: 15px;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(22, 24, 29, 0.18);
  padding: 12px 15px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.step h3 {
  font-family: "PS2P";
  font-size: 13px;
  text-transform: uppercase;
  line-height: 1.7;
}
.step p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 8px;
}