/* The colours are the app's own, transcribed from app/Castroom/Tokens.swift. The site and the
   product should look like one thing, and the app is dark only, so this is too. */
:root {
  --bg: #0E0E10;
  --surf: #17181B;
  --surf2: #1F2025;
  --line: #26272C;
  --line2: #383A42;
  --fg: #F4F4F6;
  --fg2: #A4A5AD;
  --fg3: #6C6D77;
  --acc: #D4F34A;
  --acc-ink: #14150A;
  --bad: #FF6060;
  --measure: 34rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` is not decoration. The shots carry width and height attributes so the page does
   not jump while they load, and those attributes are a presentational hint of `height: 900px`.
   Without this the hint fights `width: 100%` and every screenshot renders stretched. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--acc); text-decoration: none; border-bottom: 1px solid #D4F34A55; }
a:hover { border-bottom-color: var(--acc); }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 24px; }

/* The mark and the name on one line, centred against each other, which is MARK-4. */
.brand { display: inline-flex; align-items: center; gap: 9px; border: 0; color: var(--fg); }
.brand:hover { border: 0; }
.brand img { width: 26px; height: 26px; }
.brand span { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }

.top { padding: 26px 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top nav { display: flex; align-items: center; gap: 22px; }
.top nav a { color: var(--fg2); border: 0; font-size: 15px; }
.top nav a:hover { color: var(--fg); border: 0; }

/* The two header links cannot shrink below their own text, and a flex row that cannot shrink
   makes the whole page wider than the phone holding it. On a narrow screen they go: both targets
   are a scroll away, and neither is the reason anybody came. */
@media (max-width: 660px) {
  .top nav { display: none; }
}

/* Hero */
.hero { padding: 70px 0 0; text-align: center; }
.hero h1 {
  margin: 0 auto 22px;
  max-width: 42rem;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.hero h1 em { font-style: normal; color: var(--acc); }
.lede { margin: 0 auto; max-width: var(--measure); color: var(--fg2); font-size: 1.15rem; }

/* The one form on the page. Repeated at the bottom, same markup. */
.signup { margin: 34px auto 0; max-width: 27rem; }
.signup form { display: flex; gap: 9px; }
.signup input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px;
  background: var(--surf2); color: var(--fg);
  border: 1px solid var(--line2); border-radius: 8px;
  font: inherit; font-size: 16px;
}
.signup input::placeholder { color: var(--fg3); }
.signup input:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }
.signup button {
  flex: 0 0 auto; height: 46px; padding: 0 20px;
  background: var(--acc); color: var(--acc-ink);
  border: 0; border-radius: 8px;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.signup button:hover { filter: brightness(1.08); }
.signup button:disabled { opacity: 0.5; cursor: default; }
/* Side by side there is about 210px of button, so on a narrow phone the field is squeezed into a
   strip too small to read what you typed. Stacked, both are full width. */
@media (max-width: 480px) {
  .signup form { flex-direction: column; }
  .signup button { width: 100%; }
}

.signup .note { margin: 11px 0 0; color: var(--fg3); font-size: 0.86rem; }
.signup .said { margin: 11px 0 0; font-size: 0.92rem; color: var(--acc); }
.signup .said[data-bad] { color: var(--bad); }

/* Screenshots. The frame is the app's own border and radius so a shot sits in something that
   looks like the window it came from. */
figure.shot { margin: 0; }
figure.shot img {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surf); box-shadow: 0 18px 50px #00000066;
}
figure.shot figcaption { margin-top: 11px; color: var(--fg3); font-size: 0.86rem; }
.hero-shot { margin-top: 64px; }

/* Features: text beside a shot, sides swapping down the page. */
.feature { padding: 84px 0 0; }
.feature .wrap { display: grid; gap: 44px; align-items: center; grid-template-columns: 1fr; }
.feature h2 {
  margin: 0 0 14px; font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15; letter-spacing: -0.03em; font-weight: 700;
}
.feature p { margin: 0 0 14px; color: var(--fg2); max-width: var(--measure); }
.feature p:last-child { margin-bottom: 0; }
.feature strong { color: var(--fg); font-weight: 600; }

/* Two text blocks side by side, for the pair that has no screenshot worth taking. */
.feature.pair .wrap { align-items: start; gap: 44px; }

@media (min-width: 860px) {
  .feature .wrap { grid-template-columns: 1fr 1fr; gap: 60px; }
  .feature.flip .text { order: 2; }
}

/* Deliberate omissions */
.notdo { padding: 100px 0 0; }
.notdo h2 {
  margin: 0 0 14px; font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em; font-weight: 700;
}
.notdo > .wrap > p { margin: 0 0 26px; color: var(--fg2); max-width: var(--measure); }
.notdo ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.notdo li { background: var(--bg); padding: 16px 18px; color: var(--fg2); font-size: 0.97rem; }
.notdo li b { color: var(--fg); font-weight: 600; }

@media (min-width: 720px) {
  .notdo ul { grid-template-columns: 1fr 1fr; }
}

/* Closing block and footer */
.close { padding: 104px 0 0; text-align: center; }
.close h2 {
  margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em; font-weight: 700;
}
.close p { margin: 0 auto; max-width: var(--measure); color: var(--fg2); }

.foot { margin-top: 104px; border-top: 1px solid var(--line); padding: 30px 0 60px; }
.foot .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot a { color: var(--fg2); border: 0; font-size: 0.92rem; }
.foot a:hover { color: var(--fg); border: 0; }
.foot .brand img { width: 22px; height: 22px; }
.foot .brand span { font-size: 17px; }

/* The legal pages, which are one column of text and nothing else. */
.doc { max-width: 44rem; margin: 0 auto; padding: 46px 24px 90px; }
.doc h1 { font-size: 2rem; letter-spacing: -0.03em; margin: 0 0 6px; }
.doc h2 { font-size: 1.1rem; margin: 2.4rem 0 0.5rem; }
.doc p, .doc li { color: var(--fg2); }
.doc ul { padding-left: 1.2rem; }
.doc li { margin: 0.4rem 0; }
.doc .dim { color: var(--fg3); font-size: 0.9rem; }
.doc nav { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.doc nav a { margin-right: 1.25rem; }