/* Concept 8: the seller's desk. A dark band between the market and services sections. */

.sl {
  --sl-ink: hsl(40 30% 96%);
  --sl-mute: hsl(40 12% 96% / 0.6);
  --sl-line: hsl(40 30% 96% / 0.14);
  --sl-brass: var(--mf-brass, #a88f5c);
  padding: 120px 0 128px; color: var(--sl-ink);
  background:
    radial-gradient(800px 420px at 100% 0%, hsl(38 35% 45% / 0.09), transparent 65%),
    linear-gradient(180deg, hsl(222 47% 7%), hsl(222 40% 10%));
}
.sl-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }

.sl-eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 26px;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sl-brass);
}
.sl-eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.sl h2 {
  margin: 0 0 24px; font-family: var(--mf-serif, serif); font-weight: 500;
  font-size: clamp(36px, 4vw, 54px); line-height: 1.06; letter-spacing: -0.008em; color: var(--sl-ink);
}
.sl-copy > p:not(.sl-eyebrow) { margin: 0 0 30px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--sl-mute); max-width: 30em; }
.sl-points { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sl-line); }
.sl-points li { padding: 14px 0; border-bottom: 1px solid var(--sl-line); font-size: 14px; color: hsl(40 12% 96% / 0.82); }

/* Tool */
.sl-tool { border: 1px solid var(--sl-line); padding: 34px 36px 30px; background: hsl(222 47% 5% / 0.45); }
.sl-field { margin-bottom: 28px; }
.sl-label { display: block; margin: 0 0 12px; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-mute); }
.sl-sectors { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-sectors button {
  padding: 8px 13px; font-size: 13px; color: hsl(40 12% 96% / 0.75); background: transparent;
  border: 1px solid var(--sl-line); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sl-sectors button:hover { border-color: hsl(40 30% 96% / 0.4); color: var(--sl-ink); }
.sl-sectors button[aria-pressed="true"] { background: var(--sl-ink); border-color: var(--sl-ink); color: hsl(222 47% 8%); }
.sl-sectors button:focus-visible, .sl-actions a:focus-visible { outline: 1px solid var(--sl-brass); outline-offset: 3px; }

.sl-year { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 10px; }
.sl-year .sl-label { margin: 0; }
.sl-year-out { font: 200 40px/1 "DM Sans", system-ui, sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sl-year input { grid-column: 1 / -1; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
.sl-year input::-webkit-slider-runnable-track { height: 1px; background: hsl(40 30% 96% / 0.3); }
.sl-year input::-moz-range-track { height: 1px; background: hsl(40 30% 96% / 0.3); }
.sl-year input::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -7px; border-radius: 50%; background: var(--sl-ink); border: 0; }
.sl-year input::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--sl-ink); border: 0; }
.sl-year input:focus-visible { outline: 1px solid var(--sl-brass); outline-offset: 4px; }

/* Result */
.sl-result { padding-top: 26px; border-top: 1px solid var(--sl-line); min-height: 250px; }
.sl-kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.06em; color: var(--sl-brass); }
.sl-range-text { margin: 0; font: 200 clamp(38px, 4.4vw, 56px)/1.05 "DM Sans", system-ui, sans-serif; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.sl-range-text span { color: var(--sl-mute); }
.sl-range-text.sl-thin { font-family: var(--mf-serif, serif); font-weight: 500; letter-spacing: -0.01em; }
.sl-sub { margin: 10px 0 0; font-size: 14px; color: var(--sl-mute); }

.sl-chart { display: block; width: 100%; height: auto; margin: 22px 0 6px; overflow: visible; }
.sl-chart .sl-axis { stroke: hsl(40 30% 96% / 0.35); }
.sl-chart .sl-tick { stroke: hsl(40 30% 96% / 0.25); }
.sl-chart text { fill: hsl(40 12% 96% / 0.62); font: 12px "DM Sans", system-ui, sans-serif; text-anchor: middle; letter-spacing: 0.04em; }
.sl-chart .sl-range { fill: hsl(38 35% 55% / 0.18); stroke: hsl(38 35% 55% / 0.55); stroke-width: 1; }
.sl-chart .sl-mid { stroke: var(--sl-brass); stroke-width: 1.5; }
.sl-chart .sl-mid-label { fill: var(--sl-brass); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.sl-chart .sl-dot { fill: hsl(222 47% 7%); stroke: hsl(40 30% 96% / 0.55); stroke-width: 1.2; }
.sl-chart .sl-dot.is-comp { fill: var(--sl-ink); stroke: hsl(222 47% 7%); stroke-width: 1.5; }
.sl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 11.5px; color: var(--sl-mute); }
.sl-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid hsl(40 30% 96% / 0.45); margin-left: 6px; }
.sl-key:first-child { margin-left: 0; }
.sl-key.is-comp { background: var(--sl-ink); border-color: var(--sl-ink); }

/* Actions */
.sl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.sl-cta {
  display: inline-flex; gap: 10px; padding: 15px 26px; font-size: 14px; letter-spacing: 0.03em;
  background: var(--sl-ink); color: hsl(222 47% 8%); text-decoration: none; transition: background 0.2s;
}
.sl-cta:hover { background: #fff; }
.sl-call { font-size: 13px; color: var(--sl-mute); text-decoration: none; border-bottom: 1px solid var(--sl-line); padding-bottom: 2px; }
.sl-call:hover { color: var(--sl-ink); }
.sl-fine { margin: 22px 0 0; font-size: 11px; line-height: 1.6; color: hsl(40 12% 96% / 0.42); }

@media (max-width: 1023px) {
  .sl-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 640px) {
  .sl { padding: 80px 0 88px; }
  .sl-tool { padding: 24px 18px 22px; margin: 0 -6px; }
  .sl-sectors button { padding: 7px 10px; font-size: 12.5px; }
  .sl-result { min-height: 0; }
  .sl-cta { width: 100%; justify-content: center; }
}