/* donpiston.com. Steel-black around the Don, the app's own light surface around the car: its window,
   text, state and accent colours are copied from the app's theme (src/Bmwlog.Ui/Theme). */

@font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/piazzolla-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/piazzolla-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/piazzolla-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/piazzolla-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Piazzolla"; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/piazzolla-latin-800-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Piazzolla"; font-style: italic; font-weight: 800; font-display: swap; src: url("/assets/fonts/piazzolla-cyrillic-800-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/golos-text-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/golos-text-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/golos-text-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/golos-text-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --black: #0d0e10;
  --graphite: #17191c;
  --edge: #34383e;
  --bone: #f1f2f3;
  --steel: #a3a9b0;

  /* The app's theme. */
  --surface: #e8eaec;
  --surface-1: #f5f6f8;
  --card: #fafafb;
  --pressed: #e4e7ea;
  --line: #d6d9dd;
  --ink: #1a1d21;
  --ink-2: #5a6169;
  --tick: #8e969f;
  --ok: #0f6e63;
  --ok-zone: #a9d3cc;
  --watch: #5f6e0f;
  --watch-zone: #d2df97;
  --attention: #7a3000;
  --accent: #2b55c8;
  --accent-soft: #e6ecfa;

  --display: "Piazzolla", "Iowan Old Style", Georgia, serif;
  --text: "Golos Text", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --wide: 1400px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

button { font: inherit; }

h1, h2, h3, p, ul { margin: 0; }

h2 {
  font: 700 clamp(2rem, 3.6vw, 3rem)/1.08 var(--display);
  letter-spacing: -0.012em;
}

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

.dark :focus-visible, .need :focus-visible, .bottom :focus-visible { outline-color: var(--bone); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- The dark head ------------------------------------------------------------------------- */

.dark {
  position: relative;
  color: var(--bone);
  background:
    radial-gradient(70rem 46rem at 76% 34%, #2e3136 0%, rgba(46, 49, 54, 0) 68%),
    linear-gradient(180deg, #101214 0%, var(--black) 100%);
}

.top {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: italic 800 1.4rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.anchors { display: flex; gap: clamp(1rem, 2.4vw, 2rem); margin-left: auto; font-size: 0.97rem; }

.anchors a { color: var(--steel); text-decoration: none; transition: color 0.15s; }

.anchors a:hover { color: var(--bone); }

.langs { display: flex; gap: 0.15rem; font-size: 0.9rem; font-weight: 600; }

.langs > * { padding: 0.28rem 0.55rem; border-radius: 8px; text-decoration: none; }

.langs span { background: var(--edge); }

.langs a { color: var(--steel); transition: color 0.15s; }

.langs a:hover { color: var(--bone); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 1rem;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(0.5rem, 2vw, 1.5rem) var(--gutter) 0;
}

.hero-copy { padding-bottom: clamp(2.5rem, 6vw, 5rem); }

.h1-name {
  display: block;
  font: italic 800 clamp(3.6rem, 9.4vw, 8.6rem)/0.94 var(--display);
  letter-spacing: -0.028em;
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Cyrillic runs wider: the name stays on one line on a desktop. */
html[lang="ru"] .h1-name { font-size: clamp(3.3rem, 8vw, 7.3rem); }

.h1-verb {
  display: block;
  margin-top: 0.18em;
  color: var(--steel);
  font: 500 clamp(2rem, 4.6vw, 4.1rem)/1.05 var(--display);
  letter-spacing: -0.014em;
  animation: rise 0.8s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.lede {
  max-width: 37rem;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  color: #c8ccd1;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  text-wrap: pretty;
  animation: rise 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  animation: rise 0.8s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.download {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem 0.8rem 1.05rem;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--graphite);
  color: #b4b9bf;
  font-weight: 600;
  cursor: not-allowed;
}

.ico-solid { width: 1.15rem; height: 1.15rem; flex: none; }

.soon {
  margin-left: 0.2rem;
  padding: 0.14rem 0.5rem;
  border-radius: 99px;
  background: var(--edge);
  color: #dfe2e5;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

/* The master keeps its haze, so the Don stands in his own light. His rod runs into the next section. */
.hero-don {
  position: relative;
  z-index: 2;
  width: 112%;
  max-width: 720px;
  height: auto;
  justify-self: center;
  margin: -1.5rem -6% -5.5rem 0;
  animation: stroke 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes stroke {
  from { opacity: 0; transform: translateY(70px); }
  to { opacity: 1; transform: none; }
}

/* --- The car ------------------------------------------------------------------------------- */

.reading { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 5vw, 4rem); }

.reading-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  max-width: var(--wide);
  margin: 0 auto clamp(1.75rem, 3vw, 2.75rem);
  /* Clear of the Don's rod. */
  padding-right: 16vw;
}

.read-button {
  padding: 0.72rem 1.5rem;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.read-button:hover { background: #2348ad; }

.read-button:disabled { background: var(--tick); cursor: default; }

/* Never taller than the window, so the whole car is seen at once. */
.stage {
  width: 100%;
  max-width: min(var(--wide), calc((100vh - 3rem) * 1.58));
  height: auto;
  margin: 0 auto;
  overflow: visible;
  font-family: var(--text);
}

.box > rect:first-child { fill: var(--card); stroke: var(--line); stroke-width: 1.2; transition: fill 0.15s, stroke 0.15s; }

.box .pad { fill: var(--pressed); }

.box > use { color: var(--ink); }

.name { fill: var(--ink); font-size: 15.5px; font-weight: 600; }

.line { fill: none; stroke: var(--tick); stroke-width: 1.8; stroke-linejoin: round; transition: stroke 0.15s; }

.dot { fill: var(--card); stroke: var(--tick); stroke-width: 2.4; transition: stroke 0.15s; }

.lit { opacity: 0; transition: opacity 0.25s; }

.edge { fill: none; stroke: var(--accent); stroke-width: 2.4; transition: stroke 0.15s; }

.mark text { font-size: 14px; font-weight: 600; text-anchor: middle; }

.mark { transform-box: fill-box; transform-origin: center; }

.ok .mark circle { fill: var(--ok-zone); }
.ok .mark { color: var(--ok); }
.watch .mark circle { fill: var(--watch-zone); }
.watch .mark { color: var(--watch); }
.stored .mark circle { fill: var(--pressed); }
.stored .mark text { fill: var(--ink); }
.attention .mark circle { fill: var(--attention); }
.attention .mark text { fill: #fff; }

/* Only what wants a look is drawn in colour on the car, as in the app. */
.node.attention .lit, .node.watch .lit { opacity: 1; }
.node.attention .line, .node.attention .dot, .node.attention .edge { stroke: var(--attention); }
.node.watch .line, .node.watch .dot, .node.watch .edge { stroke: var(--watch); }
.node.attention .line, .node.watch .line { stroke-width: 2.2; }

@media (hover: hover) {
  .node:hover .lit { opacity: 1; }
  .node:hover .line, .node:hover .dot, .node:hover .edge { stroke: var(--accent); }
  .node:hover .box > rect:first-child { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
}

.caption { max-width: var(--wide); margin: 1.25rem auto 0; color: var(--ink-2); font-size: 0.92rem; text-align: center; }

/* The read: box by box, each part in its colour for a moment; what wants a look stays lit at the end. */
.o0 { --at: 0s; } .o1 { --at: 0.19s; } .o2 { --at: 0.38s; } .o3 { --at: 0.57s; } .o4 { --at: 0.76s; }
.o5 { --at: 0.95s; } .o6 { --at: 1.14s; } .o7 { --at: 1.33s; } .o8 { --at: 1.52s; } .o9 { --at: 1.71s; }
.o10 { --at: 1.9s; } .o11 { --at: 2.09s; } .o12 { --at: 2.28s; } .o13 { --at: 2.47s; }

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .stage.reading .node .lit { opacity: 0; transition: none; animation: flash 0.62s var(--at) ease-in-out both; }
  .stage.reading .node .edge { stroke: var(--accent); transition: none; }
  .stage.reading .node .line, .stage.reading .node .dot { stroke: var(--tick); stroke-width: 1.8; transition: none; animation: seek 0.62s var(--at) ease-in-out both; }
  .stage.reading .node .box > rect:first-child { animation: seek-box 0.62s var(--at) ease-in-out both; }
  .stage.reading .node .mark { animation: mark 0.34s calc(var(--at) + 0.3s) cubic-bezier(0.2, 1.5, 0.4, 1) both; }
}

@keyframes flash { 0%, 100% { opacity: 0; } 35%, 65% { opacity: 1; } }
@keyframes seek { 35%, 65% { stroke: var(--accent); } }
@keyframes seek-box { 35%, 65% { fill: var(--accent-soft); stroke: var(--accent); } }
@keyframes mark { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }

/* --- What it does ---------------------------------------------------------------------------- */

.does, .faq {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter);
}

.does-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.75rem, 4vw, 4rem);
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.does-grid article { padding: 1.4rem 0 2.4rem; border-top: 1px solid #c9cdd2; }

.ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }

.ico svg { width: 1.3rem; height: 1.3rem; }

.does-grid h3 { margin: 0.85rem 0 0.4rem; font: 700 1.5rem/1.2 var(--display); letter-spacing: -0.008em; }

.does-grid p { color: #3f454c; }

/* --- What you need --------------------------------------------------------------------------- */

.need {
  padding: clamp(3.5rem, 8vw, 7rem) var(--gutter);
  background: var(--black);
  color: var(--bone);
}

.need-inner { max-width: var(--wide); margin: 0 auto; }

.eyebrow { color: var(--steel); font-weight: 600; }

.need h2 {
  margin-top: 0.6rem;
  font: italic 800 clamp(2.6rem, 7vw, 6.2rem)/1 var(--display);
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.need-more { max-width: 36rem; margin-top: clamp(1.25rem, 2.4vw, 2rem); color: #c8ccd1; font-size: clamp(1.05rem, 1.35vw, 1.22rem); text-wrap: pretty; }

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

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(1.5rem, 4vw, 4rem); }

.faq-side img { width: clamp(5.5rem, 10vw, 8rem); height: auto; margin-top: 1.5rem; }

.faq-list details { border-top: 1px solid #c9cdd2; }

.faq-list details:last-child { border-bottom: 1px solid #c9cdd2; }

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.05rem 0;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--ink-2); transition: transform 0.2s; }

.faq-list details[open] summary svg { transform: rotate(45deg); }

.faq-list details p { max-width: 46rem; padding-bottom: 1.3rem; color: #3f454c; }

/* --- The policies ------------------------------------------------------------------------------ */

.page-title {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(2rem, 4vw, 3.25rem);
}

.page-title h1 { font: italic 800 clamp(2.8rem, 6.5vw, 5.2rem)/1 var(--display); letter-spacing: -0.024em; overflow-wrap: anywhere; }

.page-title p { margin-top: 0.8rem; color: var(--steel); }

.prose { max-width: calc(44rem + 2 * var(--gutter)); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(3rem, 6vw, 5rem); }

.prose h2 { margin: 2rem 0 0.5rem; font-size: 1.5rem; }

.prose h2:first-child { margin-top: 0; }

.prose p { color: #2f343a; }

.prose a { color: var(--accent); }

/* --- The foot ---------------------------------------------------------------------------------- */

.bottom { padding: 2.5rem var(--gutter); background: var(--black); color: var(--bone); }

.bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: var(--wide);
  margin: 0 auto;
}

.legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; color: var(--steel); font-size: 0.97rem; }

.legal a { text-decoration: none; transition: color 0.15s; }

.legal a:hover, .legal a[aria-current] { color: var(--bone); }

.independent { max-width: var(--wide); margin: 1.1rem auto 0; color: #868c93; font-size: 0.85rem; }

.independent + .independent { margin-top: 0.3rem; }

/* --- Narrower windows -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .does-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Under this the boxes would be too small to read: the car alone, every part in its colour. */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-bottom: 0; }
  .hero-don { width: min(86vw, 30rem); margin: 0.5rem auto -3.5rem; justify-self: center; }
  .anchors { display: none; }
  .langs { margin-left: auto; }

  .reading { padding-top: 5rem; }
  .reading-head { padding-right: 0; margin-bottom: 0.25rem; }
  [data-read] { display: none; }
  .stage { margin: -8.9% 0; }
  .box, .line, .dot, .edge { display: none; }
  .node .lit { opacity: 1; }
  .caption { display: none; }

  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq-side { display: flex; align-items: center; justify-content: space-between; }
  .faq-side img { width: 4.5rem; margin-top: 0; }
}

@media (max-width: 560px) {
  .does-grid { grid-template-columns: minmax(0, 1fr); }
  .download { width: 100%; }
  .soon { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-read] { display: none; }
  .h1-name, .h1-verb, .lede, .downloads, .hero-don { animation: none; }
}