/* Calibro Track marketing site.
   Built from docs/design_handoff_calibro_track/Calibro Site.dc.html.
   Light only, by design — the site is deliberately not the in-app Atlassian stack. */

:root {
  color-scheme: light;

  /* Ink and text */
  --ink: #14171a;
  --ink-raised: #1b1f24;
  --ink-line: #2c3138;
  --text: #3c4149;
  --text-soft: #4a5058;
  --muted: #6b7280;
  --muted-on-ink: #a8afb8;

  /* Teal — the one accent */
  --teal: #0b6e61;
  --teal-deep: #094f46;
  --teal-bright: #35c4b0;
  --teal-tint: #e6f5f2;
  --teal-wash: #f4fbf9;

  /* Surfaces and lines */
  --white: #ffffff;
  --surface: #fafafa;
  --surface-2: #f7f8f9;
  --surface-3: #f1f2f4;
  --line: #e8eaed;
  --line-strong: #d4d7dc;

  /* Product-shot palette — these mirror the app, which follows Atlassian's tokens */
  --jira-blue: #0c66e4;
  --jira-navy: #172b4d;
  --jira-slate: #44546f;
  --jira-grey: #626f86;
  --jira-line: #ebecf0;

  /* Status lozenges */
  --lz-neutral-bg: #f1f2f4;
  --lz-neutral-fg: #44546f;
  --lz-blue-bg: #e9f2ff;
  --lz-blue-fg: #0055cc;
  --lz-green-bg: #dffcf0;
  --lz-green-fg: #216e4e;
  --lz-purple-bg: #eae6ff;
  --lz-purple-fg: #5e4db2;
  --lz-red-bg: #ffeceb;
  --lz-red-fg: #ae2e24;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Outer box, not the content box — the gutter sits inside it, so content
     tops out at 1168px, the width the design lays out against. */
  --wrap: 1280px;
  --gutter: 56px;
  --radius: 6px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: pretty;
}

img,
svg {
  max-width: 100%;
}

/* Components below set their own `display`, which would otherwise beat the
   user-agent rule for [hidden] and leave filtered-out rows on screen. */
[hidden] {
  display: none !important;
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  color: var(--teal-deep);
  text-decoration: underline;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  color: var(--white);
  text-decoration: none;
}

/* Anything that shares an element with .wrap must set vertical padding with
   `padding-block`, never the `padding` shorthand — the shorthand resets
   padding-inline to 0 and puts the content against the viewport edge. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap--flush {
  padding-inline: 0;
}

.measure {
  max-width: 620px;
}

.mono {
  font-family: var(--mono);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background: var(--ink);
  color: var(--white);
}

.btn--primary:hover {
  background: #24282e;
  color: var(--white);
}

.btn--secondary {
  border-color: var(--line-strong);
  background: var(--white);
  color: var(--ink);
}

.btn--secondary:hover {
  border-color: #b9bdc4;
  background: var(--surface);
  color: var(--ink);
}

.btn--bright {
  background: var(--teal-bright);
  color: var(--ink);
  font-weight: 600;
}

.btn--bright:hover {
  background: #4ad3c0;
  color: var(--ink);
}
.btn--sm {
  height: 38px;
  padding: 0 18px;
  font-size: 14px;
}

.btn--block {
  width: 100%;
}

/* ------------------------------------------------------------------ chrome */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 16px;
}

.site-nav a {
  color: var(--text);
  font-size: 14px;
}

.site-nav a[aria-current="page"] {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--teal);
  color: var(--ink);
  font-weight: 600;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.site-header__actions a:not(.btn) {
  color: var(--text);
  font-size: 14px;
}

/* Two-line hamburger, per the mobile comps. Hidden above the breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  padding: 8px 6px;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
}

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

.site-footer {
  border-top: 1px solid var(--line);
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-block: 40px 48px;
}

.site-footer__about {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
}

.site-footer__about .brand {
  font-size: 14px;
}

.site-footer__about .brand__mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.site-footer__tagline {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.site-footer__cols {
  display: flex;
  gap: 56px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__col h2 {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.site-footer__col a {
  color: var(--text);
  font-size: 14px;
}

/* The bottom bar is where the umbrella gets said. calibrosoftware.com is the
   company and the domain; Calibro Track is the product, and it stays the name
   in the header, the footer brand and every page title. The rule runs full
   bleed while the text sits in the gutter, so the border needs its own element
   outside the .wrap.

   "Calibro Software" is deliberately not a link: the bare domain redirects
   straight back to /track, so it would be a round trip to the page you are
   already on. Make it a link when there is a company page worth sending
   people to. */
.site-footer__bottom {
  border-top: 1px solid var(--line);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 40px;
  padding-block: 20px 24px;
}

.site-footer__made {
  color: var(--muted);
  font-size: 13px;
}

.site-footer__made strong {
  color: var(--ink);
  font-weight: 600;
}

/* Hardcoded year. No build step to inject one, and a copyright that appears
   only when JS runs is worse than one that needs an edit each January. */
.site-footer__copyright {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

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

.section {
  padding-block: 64px;
}

.section--tight {
  padding-block: 48px;
}

.section--surface {
  background: var(--surface);
}

.section--ink {
  background: var(--ink);
}
.section__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.section__head h2 {
  font-size: 30px;
}

.section__head p {
  color: var(--text-soft);
}

.eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  background: var(--teal-tint);
  color: var(--teal);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}

.step-number {
  color: var(--teal);
  font-family: var(--mono);
  font-size: 12px;
}

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

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-block: 72px 64px;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__copy h1 {
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero__sub {
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.hero__note::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* ------------------------------------------- product shot (fake app chrome) */

.shot {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(20, 23, 26, 0.14);
}

.shot__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}

.shot__chrome span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9cdd4;
}

.shot__body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 320px;
}

.shot__rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
}

.shot__rail-title {
  color: var(--jira-navy);
  font-size: 12px;
  font-weight: 600;
}

.shot__total {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shot__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.shot__total-row span:first-child {
  color: var(--jira-grey);
  font-size: 10px;
}

.shot__total-row span:last-child {
  color: var(--jira-navy);
  font-size: 11px;
  font-weight: 600;
}

.meter {
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: #e4e6ea;
}

.meter > i {
  display: block;
  height: 100%;
  background: var(--teal);
}

.shot__days {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shot__day {
  display: grid;
  grid-template-columns: 30px 1fr 34px;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
}

.shot__day span:first-child {
  color: var(--jira-slate);
  font-size: 10px;
}

.shot__day span:last-child {
  color: var(--jira-navy);
  font-size: 10px;
  text-align: right;
}

.shot__day .meter {
  height: 3px;
}

.shot__day .meter > i {
  background: #66b8ac;
}

.shot__day--active {
  border: 1.5px solid var(--jira-blue);
}

.shot__day--active span {
  font-weight: 600;
}

.shot__day--active .meter > i {
  background: var(--teal);
}

.shot__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  margin-top: auto;
  border-radius: 4px;
  background: var(--jira-blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
}

.shot__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}

.shot__day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.shot__day-head strong {
  color: var(--jira-navy);
  font-size: 13px;
  font-weight: 600;
}

.shot__day-head span {
  color: var(--jira-grey);
  font-size: 11px;
}

.shot__composer {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
}

.shot__field {
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
}

.shot__field--grow {
  flex: 1;
}

.shot__field--short {
  width: 52px;
}

.shot__log {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  background: var(--jira-blue);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
}

.shot__entry {
  display: grid;
  grid-template-columns: 42px 1fr 34px 58px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.shot__entry--done {
  background: var(--surface-2);
}

.shot__key {
  color: var(--jira-blue);
  font-size: 10px;
  font-weight: 600;
}

.shot__summary {
  color: var(--jira-navy);
  font-size: 11px;
}

.shot__hours {
  color: var(--jira-navy);
  font-size: 11px;
  font-weight: 600;
}

.shot__entry--done .shot__summary,
.shot__entry--done .shot__hours {
  color: var(--jira-slate);
}

.shot__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--jira-slate);
  font-size: 9px;
  font-weight: 600;
}

.shot__state--approved {
  background: var(--lz-green-bg);
  color: var(--lz-green-fg);
}

/* -------------------------------------------------------- home pillars strip */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-block: 1px solid var(--line);
  background: var(--line);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 40px;
  background: var(--white);
}

.pillar h3 {
  font-size: 19px;
}

.pillar p {
  color: var(--text-soft);
  font-size: 15px;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ feature cards */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}

.card__preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.card__body h3 {
  font-size: 17px;
}

.card__body p {
  color: var(--text-soft);
  font-size: 14px;
  text-wrap: pretty;
}

.card__body a {
  font-size: 14px;
  font-weight: 500;
}

.card__body code {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95em;
}

/* Miniatures inside the three feature cards */
.mini-composer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
}

.mini-composer .shot__field {
  height: 20px;
  border-radius: 3px;
}

.mini-composer .shot__field--short {
  width: 40px;
}

.mini-composer i {
  width: 34px;
  height: 20px;
  border-radius: 3px;
  background: var(--jira-blue);
}

.mini-row {
  display: grid;
  grid-template-columns: 36px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.mini-row .bar {
  height: 6px;
  border-radius: 3px;
  background: var(--jira-line);
}

.mini-row span:first-child {
  color: var(--jira-blue);
  font-size: 9px;
  font-weight: 600;
}

.mini-row span:last-child {
  color: var(--jira-navy);
  font-size: 10px;
  text-align: right;
}

.mini-approval {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
}

.mini-approval .avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--jira-blue);
}

.mini-approval .lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.mini-approval .lines i:first-child {
  width: 60%;
  height: 5px;
  border-radius: 3px;
  background: #dfe1e6;
}

.mini-approval .lines i:last-child {
  width: 40%;
  height: 4px;
  border-radius: 2px;
  background: var(--jira-line);
}

.mini-approval strong {
  color: var(--jira-navy);
  font-size: 10px;
  font-weight: 700;
}

.mini-approval .pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--jira-blue);
  color: var(--white);
  font-size: 9px;
  font-weight: 600;
}

.mini-decide {
  display: grid;
  grid-template-columns: 1fr 34px 30px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.mini-decide .bar {
  height: 6px;
  border-radius: 3px;
  background: var(--jira-line);
}

.mini-decide span:nth-child(2) {
  color: var(--jira-navy);
  font-size: 10px;
  text-align: right;
}

.mini-decide span:last-child {
  color: var(--teal);
  font-size: 10px;
  text-align: right;
}

.mini-bar-row {
  display: grid;
  grid-template-columns: 58px 1fr 28px;
  align-items: center;
  gap: 8px;
}

.mini-bar-row span:first-child {
  color: var(--jira-navy);
  font-size: 10px;
}

.mini-bar-row span:last-child {
  color: var(--jira-navy);
  font-size: 10px;
  text-align: right;
}

.mini-bar-row .track {
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-3);
}

.mini-bar-row .track > i {
  display: block;
  height: 100%;
  background: var(--teal);
}

.mini-bar-row--muted span:first-child,
.mini-bar-row--muted span:last-child {
  color: var(--jira-slate);
}

.tag-teal {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--teal-tint);
  color: var(--teal);
  font-size: 9px;
  font-weight: 600;
}

/* --------------------------------------------------------- dark honesty band */

.honest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding-block: 64px;
}

.honest__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.honest__copy h2 {
  color: var(--white);
  font-size: 30px;
}

.honest__copy p {
  color: var(--muted-on-ink);
  line-height: 1.65;
  text-wrap: pretty;
}

.honest__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}

.honest__actions a:not(.btn) {
  color: var(--white);
  font-size: 15px;
}

.honest__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  background: var(--ink-raised);
}

.honest__panel h3 {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.honest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-line);
}

.honest__item:last-child {
  border-bottom: 0;
}

.honest__item a,
.honest__item > span:first-child {
  flex: 1;
  color: var(--white);
  font-size: 14px;
}

.honest__status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--ink-line);
  color: var(--muted-on-ink);
  font-size: 11px;
}
/* ------------------------------------------------------------- install band */

.install-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 48px;
  border-bottom: 1px solid var(--line);
}

.install-band > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.install-band h2 {
  font-size: 24px;
}

.install-band p {
  color: var(--text-soft);
  font-size: 15px;
}

/* ------------------------------------------------------------- page heading */

/* Title and standfirst for the pages that are prose rather than layout: the
   three legal pages and the 404. */
.page-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  padding: 64px 0 24px;
}

.page-head h1 {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.page-head p {
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- legal pages */

/* Long-form prose, narrower than the marketing measure. Legal text is read in
   full by the few people who read it at all, so it gets a comfortable line
   length and generous leading rather than the tighter marketing rhythm. */

.legal {
  max-width: 680px;
  padding-bottom: 80px;
}

.legal__updated {
  display: block;
  margin-bottom: 32px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.legal section {
  margin-top: 40px;
}

.legal h2 {
  margin-bottom: 12px;
  font-size: 20px;
}

.legal h3 {
  margin: 24px 0 8px;
  font-size: 15px;
}

.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.75;
}

.legal p + p {
  margin-top: 14px;
}

.legal ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.legal li {
  margin-bottom: 8px;
}

.legal li::marker {
  color: var(--line-strong);
}

.legal strong {
  color: var(--ink);
  font-weight: 600;
}

.legal code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: 0.9em;
}

/* An unresolved decision, shown rather than hidden. These are the lines that
   need a person — a jurisdiction, a mailbox that exists — and a reader deserves
   to know which parts of a policy are not yet settled. Grep `legal__open` to
   find every one of them before launch. */
.legal__open {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 14px;
}

.legal__open strong {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

/* ----------------------------------------------------------------- sla page */

/* Short answers rather than long-form policy, so sections are divided by a
   rule instead of the legal pages' whitespace. Someone arriving here is
   scanning for the one thing they came for — how long a reply takes, or where
   to send it — not reading the page through. */

.sla {
  max-width: 680px;
  padding-bottom: 80px;
}

.sla section {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.sla h2 {
  margin-bottom: 12px;
  font-size: 17px;
}

.sla p {
  font-size: 15px;
  line-height: 1.75;
}

.sla p + p {
  margin-top: 14px;
}

.sla strong {
  color: var(--ink);
  font-weight: 600;
}

/* The address is the one thing on the page that gets copied by hand, so it is
   set in mono where a transposed character is visible. */
.sla__email {
  font-family: var(--mono);
  font-size: 0.92em;
  word-break: break-word;
}

/* ---------------------------------------------------------------- docs page */

.docs {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 200px;
  max-width: var(--wrap);
  margin-inline: auto;
  min-height: 720px;
}

/* While the docs are unwritten there is nothing to put in the right-hand
   rail, so the placeholder page drops it. */
.docs--no-toc {
  grid-template-columns: 248px minmax(0, 1fr);
}

.docs__nav {
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  background: #fcfcfd;
}

.docs__nav-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.docs__group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.docs__group h2 {
  padding: 0 8px 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.docs__group a,
.docs__group span.docs__link {
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
}

.docs__group a[aria-current="page"] {
  background: var(--teal-tint);
  color: var(--teal);
  font-weight: 600;
}

.docs__group .docs__link--soon {
  color: var(--muted);
}

.docs__aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.docs__aside strong {
  color: var(--ink);
  font-size: 13px;
}

.docs__aside span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.docs__aside a {
  font-size: 13px;
  font-weight: 500;
}

.docs__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
  padding: 40px 48px;
}

.docs__toc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 20px;
  border-left: 1px solid var(--line);
}

.docs__toc h2 {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.docs__toc a {
  color: var(--muted);
  font-size: 13px;
}

.docs__toc a[aria-current="true"] {
  color: var(--teal);
  font-weight: 500;
}

/* The collapsed page picker shown on mobile only */
.docs__picker {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px var(--gutter);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.docs__placeholder {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 32px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}

.docs__placeholder h1 {
  font-size: 28px;
}

.docs__placeholder p {
  color: var(--text-soft);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ roadmap board */

.board__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 0 28px;
}

.board__head h1 {
  font-size: 32px;
  letter-spacing: -0.02em;
}

.board__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 620px;
}

.board__intro p {
  color: var(--text-soft);
  line-height: 1.65;
  text-wrap: pretty;
}

.board__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 24px;
}

.filters {
  display: flex;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.filters button {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--white);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.filters button:first-child {
  border-left: 0;
}

.filters button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
  font-weight: 500;
}
.requests {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 48px;
}

/* Three columns: mark, item, status. The mark occupies the column the vote
   control used to, which is what gave the list its rhythm — without something
   there the rows read as undifferentiated paragraphs.

   Aligned to the start rather than centred: the summaries run to three or four
   lines, and a mark floating at the vertical middle of one looks unattached. */
.request {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 130px;
  align-items: start;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Decorative — the heading beside it says what the item is, so the SVG is
   aria-hidden and this column is silent to a screen reader. Teal stays the one
   accent: status colour is the lozenge's job, not the mark's. */
.request__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--teal-tint);
  border-radius: 10px;
  background: var(--teal-wash);
  color: var(--teal);
}
.request__main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.request__main h2 {
  font-size: 17px;
  letter-spacing: 0;
}
.request__summary {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}
.request__status {
  display: flex;
  justify-content: flex-end;
}
.lozenge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  background: var(--lz-neutral-bg);
  color: var(--lz-neutral-fg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.lozenge--progress {
  background: var(--lz-blue-bg);
  color: var(--lz-blue-fg);
}

.lozenge--planned {
  background: var(--teal-tint);
  color: var(--teal);
}

.lozenge--shipped {
  background: var(--lz-green-bg);
  color: var(--lz-green-fg);
}

.lozenge--submitted {
  background: var(--lz-purple-bg);
  color: var(--lz-purple-fg);
}

.lozenge--needs-edit {
  background: var(--lz-red-bg);
  color: var(--lz-red-fg);
}
.board__empty {
  padding: 32px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.comment:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
/* --------------------------------------------------------------- changelog */

.changelog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 40px 0 48px;
  max-width: 860px;
}

.changelog > h1 {
  margin-bottom: 16px;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.release {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.release:last-of-type {
  border-bottom: 1px solid var(--line);
}

.release__when {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.release__when time {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
}

.release__version {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 11px;
}

.release__version--latest {
  background: var(--teal-tint);
  color: var(--teal);
}

.release__what {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.release__what h2 {
  font-size: 18px;
  letter-spacing: 0;
}

.release__what p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

.release__what a {
  font-size: 14px;
}

/* ------------------------------------------------------------ 900px and down */

@media (max-width: 900px) {
  :root {
    --gutter: 20px;
  }

  .site-header__bar {
    padding-block: 14px;
  }

  .site-nav,
  .site-header__actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Panel revealed by the hamburger */
  .site-header[data-nav-open="true"] .site-nav,
  .site-header[data-nav-open="true"] .site-header__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 8px 0 16px;
  }

  .site-header[data-nav-open="true"] .site-header__bar {
    flex-wrap: wrap;
  }

  .site-header[data-nav-open="true"] .site-nav a {
    padding: 10px 0;
    font-size: 16px;
  }

  .site-header[data-nav-open="true"] .site-nav a[aria-current="page"] {
    border-bottom: 0;
    color: var(--teal);
  }

  .site-header[data-nav-open="true"] .site-nav {
    padding-bottom: 8px;
  }

  .site-header[data-nav-open="true"] .site-header__actions {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .site-header[data-nav-open="true"] .site-header__actions a:not(.btn) {
    padding: 10px 0;
    font-size: 16px;
  }

  .site-header[data-nav-open="true"] .site-header__actions .btn {
    height: 46px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 32px 28px;
  }

  .hero__copy {
    gap: 18px;
  }

  .hero__copy h1 {
    font-size: 30px;
  }

  .hero__sub {
    font-size: 16px;
  }

  /* Full-width stacked buttons — the design's mobile CTA treatment */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .hero__actions .btn {
    height: 48px;
    width: 100%;
  }

  .hero__note {
    font-size: 13px;
  }

  /* The product shot crops to the entry list rather than shrinking illegibly */
  .shot__body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .shot__rail,
  .shot__composer {
    display: none;
  }

  .section {
    padding-block: 36px;
  }

  .section--tight {
    padding-block: 28px;
  }

  .section__head {
    margin-bottom: 20px;
  }

  .section__head h2 {
    font-size: 24px;
  }

  .pillars {
    grid-template-columns: 1fr;
  }

  /* The strip itself is flush so its rules span the full width; the copy still
     needs the gutter. */
  .pillar {
    padding: 26px var(--gutter);
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .honest {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 32px;
  }

  .honest__copy h2 {
    font-size: 24px;
  }

  .honest__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .honest__panel {
    padding: 16px;
  }

  .honest__status {
    display: none;
  }

  .install-band {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-block: 32px;
  }

  .install-band .btn {
    width: 100%;
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 28px;
    padding-block: 28px 32px;
  }

  .site-footer__cols {
    flex-direction: column;
    gap: 20px;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    gap: 10px;
    padding-block: 18px 22px;
  }

  .page-head {
    padding: 32px 0 16px;
  }

  .page-head h1 {
    font-size: 28px;
  }

  .page-head p {
    font-size: 16px;
  }

  .docs {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .docs__picker {
    display: flex;
  }

  .docs__nav {
    display: none;
    padding: 20px var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .docs[data-nav-open="true"] .docs__nav {
    display: block;
  }

  .docs__body {
    max-width: none;
    padding: 24px var(--gutter) 28px;
  }

  .docs__toc {
    display: none;
  }

  .board__head {
    flex-direction: column;
    gap: 14px;
    padding: 24px 0 16px;
  }

  .board__head h1 {
    font-size: 26px;
  }
  /* Filters become a horizontally scrollable pill row */
  .board__controls {
    padding-bottom: 16px;
  }

  .filters {
    height: auto;
    gap: 8px;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filters button {
    flex-shrink: 0;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  /* Mark and status share the top row; the title and summary run full width
     below it. A 48px gutter down the side of a phone card would cost a quarter
     of the line length for the whole paragraph. */
  .request {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
    padding: 16px;
  }

  .request__main {
    display: contents;
  }

  /* Placed explicitly. `.request__main` is `display: contents`, so the grid
     sees icon, heading, summary, status in DOM order and would otherwise drop
     the lozenge into a fourth row on its own. */
  .request__icon {
    grid-row: 1;
    grid-column: 1;
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .request__icon svg {
    width: 20px;
    height: 20px;
  }

  .request__status {
    grid-row: 1;
    grid-column: 2;
    justify-content: flex-start;
  }

  .request__main h2 {
    grid-column: 1 / -1;
    font-size: 16px;
    line-height: 1.35;
  }

  .request__summary {
    grid-column: 1 / -1;
  }

  .request .lozenge {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
  }
  .changelog {
    padding: 28px 0 32px;
  }

  .changelog > h1 {
    font-size: 26px;
  }

  .release {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .release__when {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}