:root {
  --primary: #c45309;
  --primary-dark: #782f01;
  --primary-hover: #a84608;
  --bg: #fff3ee;
  --light: #f0d0c2;
}

/* "Kommer snart" in the header: a label, not a link */
.pill--soon { background: transparent; color: var(--primary-dark); border: 1px dashed var(--primary-dark); cursor: default; white-space: nowrap; }
.pill--soon:hover { background: transparent; color: var(--primary-dark); border-color: var(--primary-dark); }
.soon-note { font-size: 15px; color: var(--muted); }

/* Phone mock in the hero (HTML/CSS, no screenshots) */
.hero__art--sprint { display: flex; justify-content: center; }
.mock { width: 300px; max-width: 100%; padding: 8px; border-radius: 40px; background: var(--ink); box-shadow: 0 14px 30px rgba(17, 24, 39, .28); }
.mock__screen { border-radius: 32px; background: #fff; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; }
.mock__bar { background: var(--primary); color: #fff; padding: 22px 16px 14px; font: 700 18px/1.1 var(--display); }
.mock__rows { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
.mock__row { background: #fffcfa; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--text); box-shadow: 0 0 0 1px rgba(17, 24, 39, .06); }
.mock__row--curve { padding-bottom: 12px; }
.mock__row--curve svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.mock__row--curve path { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mock__row--curve .area { fill: var(--light); stroke: none; opacity: .6; }
.mock__row--curve line { stroke: #e5e7eb; stroke-width: 1; }
@media (max-width: 767px) {
  .mock { width: 260px; }
  .mock__screen { min-height: 440px; }
}

/* primary on the light feedback band is 4.38:1; use the dark shade for the outline pill */
.pill--outline { color: var(--primary-dark); border-color: var(--primary-dark); }
.pill--outline:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }