/* DriverKit — driverkit.io
 *
 * One accent, spent on the download button. Everything else stays quiet so
 * the screenshots do the talking. The palette is sampled from the app's own
 * icon rather than invented, so the site and the thing it describes look
 * like the same object.
 *
 * Body text is the visitor's own UI font — Segoe UI on Windows, which is who
 * this is for — so the page renders native and downloads one font, not four.
 */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: #0e1120;
  --ground-2: #12162a;
  --surface: #171c31;
  --surface-2: #1d2340;
  --line: #262d4a;
  --line-soft: #1e2540;
  --text: #eef1f8;
  --muted: #98a2bd;
  --faint: #6f7a99;
  --accent: #ff7a1a;
  --accent-soft: #ffa057;
  --accent-ink: #1b1000;
  --good: #46d39a;
  --warn: #f2b757;

  --display: "Bricolage", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Liberation Mono", monospace;

  --wrap: 1120px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 50px rgba(0, 0, 0, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.3rem, 5vw, 3.5rem);
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
h3 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent-soft);
  text-decoration-color: rgba(255, 160, 87, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

code,
kbd,
samp {
  font-family: var(--mono);
  font-size: 0.92em;
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.narrow {
  width: min(100% - 2.5rem, 760px);
  margin-inline: auto;
}

.muted {
  color: var(--muted);
}
.faint {
  color: var(--faint);
}
.center {
  text-align: center;
}

/* ---- header ------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.brand img {
  width: 34px;
  height: 34px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 0.97rem;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

/* ---- language switcher --------------------------------------------- */
/* A <details> and a list of links. No script: the languages are separate
   pages, so the menu only has to open, and every browser does that alone.

   The panel is absolutely positioned and the control has a fixed height, so
   opening it cannot change the height of the header. An earlier version let
   the panel fall back to static positioning on narrow screens, which pushed
   the whole navigation down the moment it opened. */

.langpick {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.6rem;          /* fixed: the panel must never resize the header */
}
.langpick > summary {
  display: flex;           /* also removes the disclosure marker everywhere */
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
  list-style: none;
  user-select: none;
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary::after {
  content: "";
  width: 0;
  height: 0;
  border: .3em solid transparent;
  border-top-color: currentColor;
  margin-top: .3em;        /* optically centres the triangle on the text */
}
.langpick > summary:hover { color: var(--text); }
.langpick[open] > summary { color: var(--text); }
.langpick[open] > summary::after { transform: rotate(180deg); margin-top: -.3em; }

.langpick ul {
  position: absolute;
  right: 0;
  top: calc(100% + .55rem);
  z-index: 40;             /* above the sticky header, which sits at 20 */
  margin: 0;
  padding: .3rem;
  list-style: none;
  /* Two columns: fourteen languages in one column runs past 26rem and hides
     four of them behind a scroll, which is the opposite of what a language
     menu is for — someone looking for theirs should see it, not discover it. */
  display: grid;
  grid-template-columns: repeat(2, minmax(9.5rem, 1fr));
  gap: 0 .15rem;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgb(0 0 0 / 45%);
}
.langpick li { margin: 0; }
.langpick ul a {
  display: block;
  padding: .38rem .6rem;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.langpick ul a:hover { background: var(--ground); color: var(--text); }
.langpick ul a[aria-current="true"] {
  color: var(--text);
  font-weight: 600;
  background: var(--line-soft);
}

/* Narrow screens keep the panel floating — it is anchored to the right edge
   of the header, so it has room without disturbing anything. */
/* One column on a phone: two would be wider than the screen. */
@media (max-width: 560px) {
  .langpick ul {
    grid-template-columns: 1fr;
    max-height: 60vh;
  }
}

/* ---- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 11px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 30px rgba(255, 122, 26, 0.22);
}
.btn-primary:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--muted);
  color: var(--text);
}

.btn-lg {
  padding: 1.05rem 1.9rem;
  font-size: 1.08rem;
}

/* ---- hero --------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30% 40% 30% -20%;
  background: radial-gradient(closest-side, rgba(255, 122, 26, 0.16), transparent);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  /* 0.88fr fitted English and wrapped five other languages. */
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.hero-mascot {
  width: clamp(110px, 14vw, 190px);
  margin-bottom: 1rem;
  filter: drop-shadow(0 18px 40px rgba(255, 122, 26, 0.18));
}

.hero p.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--muted);
  max-width: 34ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.8rem;
}
/* Measured across all fourteen languages: the pair needs 408px in Turkish
   and 558px in Japanese. Nothing fits every language on one row at this
   column width, so the buttons share whatever row they land on — side by
   side when they fit, one per row when they do not. A wrapped button that
   fills the width reads as a choice; a short one stranded underneath a long
   one reads as a bug, which is what German looked like. */
.hero-actions > .btn {
  flex: 1 1 auto;
  min-width: 0;
}
.hero-actions > .btn-lg {
  padding-inline: 1.38rem;
}

.hero-meta {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--faint);
}

/* On a wide screen the window leans past the column and towards the edge of
   the page, which reads as a real application sitting on a desk rather than
   a picture in a box. */
@media (min-width: 1100px) {
  .hero-shot {
    margin-right: clamp(-140px, -6vw, 0px);
  }
}

.hero-shot {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--surface);
}

/* A hint of window chrome, so a screenshot reads as an application. */
.chrome {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

/* ---- trust strip -------------------------------------------------- */

.strip {
  border-block: 1px solid var(--line-soft);
  background: var(--ground-2);
}
.strip ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2.2rem;
  margin: 0;
  padding: 1.1rem 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.strip li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tick {
  color: var(--good);
  flex: none;
}

/* ---- sections ----------------------------------------------------- */

section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.section-head {
  max-width: 62ch;
  margin-bottom: 2.5rem;
}
.section-head p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.7rem;
}

/* ---- steps -------------------------------------------------------- */

.steps {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.step {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.step:nth-child(even) .step-text {
  order: 2;
}

.step-n {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 0.6rem;
}
.step h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.step p {
  color: var(--muted);
  margin-bottom: 0;
}

.shot {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
}

/* ---- feature grid ------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 {
  margin-bottom: 0.4rem;
}
.card p {
  color: var(--muted);
  font-size: 0.97rem;
  margin-bottom: 0;
}
.card .ico {
  color: var(--accent);
  margin-bottom: 0.9rem;
  display: block;
}

/* ---- SDIO credit -------------------------------------------------- */

.credit {
  background: linear-gradient(180deg, var(--ground-2), var(--ground));
  border-block: 1px solid var(--line-soft);
}
.credit-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.credit h2 {
  margin-bottom: 0.8rem;
}
.credit p {
  color: var(--muted);
}
.credit .pull {
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
  color: var(--text);
  font-size: 1.05rem;
}

/* ---- FAQ ---------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.7rem;
}
/* Scoped to .faq on purpose. These were bare `details` and `summary`
   selectors, which also caught the language menu in the header — it inherited
   the accordion's card background, border and 1.1rem padding, so its summary
   was 61px tall inside a 26px control and bled above the header. An element
   selector for a component is a trap the moment a second one appears. */
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 1.3rem;
}
.faq details[open] {
  border-color: var(--surface-2);
}
.faq summary {
  cursor: pointer;
  padding: 1.1rem 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 1.2rem;
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq details p {
  color: var(--muted);
  margin-top: 0;
  padding-bottom: 1.1rem;
}
.faq details p:last-child {
  margin-bottom: 0;
}

/* ---- call to action ----------------------------------------------- */

.cta {
  text-align: center;
  background: radial-gradient(closest-side, rgba(255, 122, 26, 0.13), transparent 70%);
}
.cta .btn {
  margin-top: 0.5rem;
}

/* ---- download cards ----------------------------------------------- */

.editions {
  display: grid;
  gap: 1.2rem;
}

.edition {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
}
.edition.featured {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.edition h3 {
  font-size: 1.35rem;
  margin-bottom: 0.15rem;
}
.edition .who {
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.edition ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.97rem;
}
.edition li {
  margin-bottom: 0.25rem;
}
.edition-buy {
  text-align: right;
  display: grid;
  gap: 0.5rem;
  justify-items: end;
}
/* The one string on the site with no break opportunity in it. Without this
   the card, the section and the document all stretch to 64 monospace
   characters, and every page scrolls sideways on a phone. */
.hash code {
  overflow-wrap: anywhere;
  word-break: break-all;
  min-width: 0;
}
.hash {
  min-width: 0;
}
/* Grid and flex children refuse to shrink below their content by default,
   which is how one unbreakable string reaches the document. */
.edition > *,
.edition-buy {
  min-width: 0;
}

.size {
  font-family: var(--mono);
  color: var(--faint);
  font-size: 0.9rem;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  margin-bottom: 0.7rem;
}

/* ---- hashes ------------------------------------------------------- */

.hash {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: var(--ground-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--muted);
  overflow-x: auto;
}
.hash code {
  white-space: nowrap;
}
.copy {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.copy:hover {
  color: var(--text);
  border-color: var(--muted);
}
.copy[data-done="1"] {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
}

pre {
  background: var(--ground-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}
pre b {
  color: var(--text);
  font-weight: 600;
}

/* ---- notice ------------------------------------------------------- */

.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
}
.notice h3 {
  margin-bottom: 0.3rem;
}
.notice p:last-child {
  margin-bottom: 0;
}
.notice .ico {
  color: var(--warn);
}

/* ---- footer ------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line-soft);
  background: var(--ground-2);
  padding: 3rem 0 3.5rem;
  color: var(--faint);
  font-size: 0.92rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}
.site-foot h4 {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 0.8rem;
}
.site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.site-foot a {
  color: var(--muted);
  text-decoration: none;
}
.site-foot a:hover {
  color: var(--text);
}
.legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
}

/* ---- responsive --------------------------------------------------- */

@media (max-width: 900px) {
  .hero-grid,
  .credit-inner,
  .step,
  .foot-grid {
    grid-template-columns: 1fr;
  }
  .step:nth-child(even) .step-text {
    order: 0;
  }
  .edition {
    grid-template-columns: 1fr;
  }
  .edition-buy {
    text-align: left;
    justify-items: start;
  }
  .site-nav {
    gap: 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  /* The header carries four links and a language menu. In English that is
     already tight at 390px; in German it is 219px too wide. Let it wrap
     rather than push the language menu off the screen. */
  .site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 0.9rem;
    font-size: 0.86rem;
  }
  .btn {
    width: 100%;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}