/* Shipdeck website. Chart-paper ground, harbour-navy ink, and a signal flag for each of Shipdeck's
   four health groups, in the colors the app uses for them. The one moment of motion is the board's rows turning over
   on load, like a departures board. */

:root {
  --paper: #eef3f4;
  --paper-deep: #e1e9eb;
  --ink: #13293d;
  --ink-soft: #4b6275;
  --rule: #c9d6da;
  --flag-release: #e8772e;
  --flag-progress: #2f7be0;
  --flag-quiet: #8a9aa6;
  --flag-good: #2e9e5b;
  --link: #1f5fae;
  --button: #d9412b;
  --button-ink: #ffffff;
  --measure: 34rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f2232;
    --paper-deep: #15304a;
    --ink: #e8f0f2;
    --ink-soft: #9fb4c2;
    --rule: #26445c;
    --flag-progress: #4a8ad6;
    --flag-quiet: #7d909e;
    --link: #8cbcf2;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-underline-offset: 0.18em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--flag-release); outline-offset: 3px; border-radius: 4px; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; }
img { max-width: 100%; height: auto; display: block; }

/* Header */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
}
.brand img { border-radius: 8px; }
.stage {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
}
.top nav { display: flex; align-items: center; gap: 1.4rem; }
.top nav a:not(.button) { color: var(--ink); text-decoration: none; font-weight: 500; }
.top nav a:not(.button):hover { text-decoration: underline; }

.button {
  display: inline-block;
  background: var(--button);
  color: var(--button-ink);
  font-weight: 700;
  text-decoration: none;
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
}
.button:hover { filter: brightness(1.08); }
.button.small { padding: 0.45rem 0.9rem; border-radius: 8px; font-size: 0.95rem; }

/* Hero */

main { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  padding: 3.5rem 0 3rem;
}
h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 1.4rem;
  max-width: 11ch;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 2rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0; }
.note { color: var(--ink-soft); font-size: 0.95rem; }

/* The board: one row per product, its signal flag, group and reason. */

.board {
  margin: 0;
  background: var(--paper-deep);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.1rem;
}
.board figcaption { font-weight: 700; margin-bottom: 0.6rem; }
.board ol { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  grid-template-areas: "flag name state" "flag detail detail";
  column-gap: 0.9rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  transform-origin: 50% 0;
  animation: turn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.row:nth-child(2) { animation-delay: 0.12s; }
.row:nth-child(3) { animation-delay: 0.24s; }
.row:nth-child(4) { animation-delay: 0.36s; }
.flag {
  grid-area: flag;
  width: 1.4rem;
  height: 1rem;
  margin-top: 0.3rem;
  background: var(--flag);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(19 41 61 / 0.25);
}
.name { grid-area: name; font-weight: 700; font-size: 1.15rem; }
.state { grid-area: state; font-weight: 500; color: var(--ink-soft); text-align: right; }
.detail { grid-area: detail; color: var(--ink-soft); }

@keyframes turn {
  from { transform: perspective(600px) rotateX(-80deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .row { animation: none; } }

/* Screenshots */

.shot { margin: 0; }
.shot img { border-radius: 12px; box-shadow: 0 24px 60px -24px rgb(19 41 61 / 0.45); }
.shot.wide { margin: 0 0 6rem; }

/* Features: text beside a screenshot, alternating sides. */

.features { display: grid; gap: 6rem; margin-bottom: 6rem; }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}
.feature:nth-child(even) .copy { order: 2; }
.feature.text-only { grid-template-columns: 1fr 1fr; align-items: start; }
.feature.text-only .copy { order: 0; }
h2 { font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.8rem; font-weight: 800; }
.copy p { color: var(--ink-soft); max-width: var(--measure); margin: 0; }

/* Requirements, privacy, questions: a narrow column. */

.requirements, .privacy, .faq { max-width: 44rem; margin: 0 0 5rem; }
.requirements ul { padding: 0; margin: 0 0 1.2rem; list-style: none; }
.requirements li { padding: 0.8rem 0 0.8rem 2.2rem; border-top: 1px solid var(--rule); position: relative; }
.requirements li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.15rem;
  width: 1.1rem;
  height: 0.75rem;
  background: var(--flag-good);
  border-radius: 2px;
}
.requirements li:last-child::before { background: var(--flag-quiet); }
.install { color: var(--ink-soft); }
.privacy p { color: var(--ink-soft); }

.faq details { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { color: var(--ink-soft); margin: 0.6rem 0 0; }

footer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
footer p { margin: 0 0 0.5rem; }
footer .links a { margin-right: 1.2rem; }

/* Prose pages (privacy) */

.prose { max-width: 40rem; padding: 2.5rem 0 5rem; }
.prose h1 { max-width: none; font-size: clamp(2.2rem, 5vw, 3.2rem); }
.prose h2 { font-size: 1.35rem; margin-top: 2.4rem; }
.prose p, .prose li { color: var(--ink-soft); }

@media (max-width: 860px) {
  .hero, .feature, .feature.text-only { grid-template-columns: 1fr; gap: 2rem; }
  .feature:nth-child(even) .copy { order: 0; }
  .hero { padding-top: 1.5rem; }
  .top nav a:not(.button) { display: none; }
  .features { gap: 4rem; }
  .shot.wide { margin-bottom: 4rem; }
}