/* ---- Eluate (#eluate, page-eluate.js; formerly Distiller) and the nav's Free group ----
   The page is the site's own layout (.hero, .section, the gallery) in Eluate's colours.
   They are the app's own tokens (ui/style.css @ e3caaf9), which give each colour one
   meaning: graphite = before, ice = after, reach = target / met, amber = short. The site's
   --accent takes reach, so eyebrows and links read as Eluate's targets do. */
body[data-product=eluate] {
  --bg: #0d1011;        /* app: page */
  --ground: #111517;    /* app: panel */
  --well: #0a0d0e;      /* app: well */
  --accent: #8fd0bf;    /* app: reach */
  --hot: #8fd0bf;
  --glow: rgba(78, 207, 168, 0.13);   /* app: the mark's teal */
  --ring: rgba(143, 208, 191, 0.13);
  --dst-before: #75899a; /* app: graphite */
  --dst-after: #e3ecef;  /* app: ice */
  --dst-amber: #f4b84a;  /* app: amber */
}

/* The nav's Free group is styled once, in page-transmutation.css. */

/* ---- hero: a nine-letter name in the hero's own type ---- */
body[data-product=eluate] .hero h1 { font-size: clamp(46px, 5.2vw, 84px); letter-spacing: .08em; }
body[data-product=eluate] .hero-line { max-width: 400px; }
body[data-product=eluate] .hero-proof { max-width: 420px; }
.dst-nowrap { white-space: nowrap; }
.dst-pending { display: block; width: 100%; aspect-ratio: 1800 / 1000; border: 1px solid var(--line); border-radius: 8px; background: var(--well); }
.gallery-content .dst-pending { border-radius: 4px; }

/* ---- engine: the chain, in the report's own numbering ---- */
.dst-chain { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); min-width: 0; }
.dst-step { display: grid; grid-template-columns: 3ch minmax(150px, 13rem) minmax(0, 1fr); gap: 6px 20px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.dst-step__n { font: 12px var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.dst-step__name { font-size: 16px; font-weight: 450; }
.dst-step__did { font: 13px/1.55 var(--mono); color: var(--muted); letter-spacing: .01em; }
.dst-step.is-off .dst-step__n, .dst-step.is-off .dst-step__name, .dst-step.is-off .dst-step__did { color: var(--dim); }

/* ---- listen: the before / after player ---- */
.dst-ab { min-width: 0; }
.dst-ab__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.dst-ab__side { position: relative; text-align: left; padding: 12px 2px 14px; min-height: 62px; color: var(--muted); transition: color 160ms ease; }
.dst-ab__side strong { display: block; font-size: 17px; font-weight: 450; }
.dst-ab__side small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.dst-ab__side::after { content: ''; position: absolute; left: 0; right: 12px; bottom: -1px; height: 2px; background: transparent; transition: background-color 160ms ease; }
.dst-ab__side:hover { color: var(--ink); }
.dst-ab__side[data-ab=before][aria-pressed=true] { color: var(--dst-before); }
.dst-ab__side[data-ab=after][aria-pressed=true] { color: var(--dst-after); }
.dst-ab__side[data-ab=before][aria-pressed=true]::after { background: var(--dst-before); }
.dst-ab__side[data-ab=after][aria-pressed=true]::after { background: var(--dst-after); }
.dst-ab__wave { position: relative; height: 96px; cursor: pointer; }
.dst-ab__wave svg { display: block; width: 100%; height: 100%; }
.dst-ab__wave g { stroke-width: 2.2; transition: opacity 200ms ease; }
.dst-wave__before { stroke: var(--dst-before); }
.dst-wave__after { stroke: var(--dst-after); }
.dst-ab[data-side=after] .dst-wave__before { opacity: .28; }
.dst-ab[data-side=before] .dst-wave__after { opacity: .2; }
.dst-ab__progress { --dst-progress: 0%; position: absolute; inset: 0 auto 0 0; width: var(--dst-progress); border-right: 1px solid var(--accent); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent)); pointer-events: none; }
.dst-ab .transport { margin-top: 14px; }
.dst-ab__note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font: 12px/1.6 var(--mono); color: var(--dim); }

/* ---- report: targets, met or not ---- */
.dst-targets__body { min-width: 0; display: grid; gap: 30px; align-content: start; }
.dst-table-wrap { overflow-x: auto; }
.dst-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dst-table th, .dst-table td { padding: 14px 16px 14px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
.dst-table thead th { padding-top: 0; font: 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.dst-table tbody th { font-weight: 450; font-size: 16px; }
.dst-unit { display: block; font: 12px var(--mono); color: var(--dim); font-weight: 400; margin-top: 2px; }
.dst-table td { font: 14px var(--mono); color: var(--muted); white-space: nowrap; }
.dst-table .dst-table__got { color: var(--ink); font-size: 16px; }
.dst-table__met { padding-right: 0; }
.dst-chip { display: inline-block; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; font: 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dst-table .is-met .dst-chip { color: var(--accent); }
.dst-table .is-short .dst-chip, .dst-table .is-short .dst-table__got { color: var(--dst-amber); }
.dst-why { display: block; margin-top: 6px; font: 12px var(--mono); color: var(--dim); }
.dst-quote { margin: 0; padding-left: 20px; border-left: 2px solid var(--dst-amber); }
.dst-quote blockquote { margin: 0; }
.dst-quote p { font-size: clamp(20px, 2vw, 26px); font-weight: 320; line-height: 1.3; text-wrap: balance; }
.dst-quote figcaption { margin-top: 10px; font: 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dst-flag { max-width: 60ch; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ---- in the app ---- */
.dst-features__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); min-width: 0; }
.dst-feature { padding: 20px 0 22px; border-top: 1px solid var(--line); min-width: 0; }
.dst-feature__name { font: 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.dst-feature p { margin-top: 8px; color: var(--muted); line-height: 1.65; font-size: 15px; }
.dst-feature code { font: 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* ---- download and licence ---- */
.dst-get { outline: none; }
.dst-get__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; min-width: 0; }
.dst-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; border: 1px solid var(--line); min-width: 0; }
.dst-card--download { background: var(--well); }
.dst-card__label { font: 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dst-card__status .dst-chip { color: var(--accent); }
.dst-card__file { font: 13px/1.6 var(--mono); color: var(--ink); }
.dst-card__title { font-size: 19px; font-weight: 400; line-height: 1.35; }
.dst-card__title .text-link { overflow-wrap: anywhere; }
.dst-card__size { display: inline-block; font: 12px var(--mono); color: var(--dim); }
.dst-card__text { font-size: 14px; line-height: 1.65; color: var(--muted); }

@media (max-width: 1180px) {
  .dst-get__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1050px) {
  .dst-step { grid-template-columns: 3ch minmax(0, 1fr); }
  .dst-step__did { grid-column: 2; }
}
@media (max-width: 760px) {
  body[data-product=eluate] .hero h1 { font-size: clamp(40px, 11.5vw, 72px); letter-spacing: .06em; }
  .dst-features__list { grid-template-columns: minmax(0, 1fr); }
  .dst-ab__wave { height: 76px; }
  .dst-table th, .dst-table td { padding-right: 10px; }
  .dst-table td { white-space: normal; font-size: 13px; }
  .dst-table .dst-table__got { font-size: 14px; }
  .dst-table tbody th { font-size: 15px; }
  .dst-chip { white-space: nowrap; padding: 3px 8px; }
  /* The nav no longer fits beside the actions once free products join it: it scrolls
     sideways inside the header (never the page), with its far edge faded. */
  .product-selector { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-left: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 22px), transparent); }
  .product-selector::-webkit-scrollbar { display: none; }
  .product-selector a { flex: 0 0 auto; }
}
/* ---- end Eluate ---- */