/* Catenus: one stylesheet for the hub, the app pages and the 404.
   System font only. Visitors arrive from iOS apps and the store, so the stack
   is SF Pro for nearly all of them, and a font host would be the site's only
   third-party request. Design record: docs/hub/restyle.md. */

:root {
  color-scheme: light dark;
  --bg: #FAFAF7;
  --text: #16161A;
  --muted: #5C5C64;
  --rule: #E3E3DD;
  --brand: #8A5A00;      /* solar #FFB300 is 1.7:1 on paper; this is 5.7:1 */
  --icon-edge: rgba(0, 0, 0, 0.08);
  /* Each app page sets its own accent; the hub has none. */
  --accent: var(--text);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  --page: 1120px;
  --measure: 36em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0B;
    --text: #EDEDEC;
    --muted: #9C9CA4;
    --rule: #232327;
    --brand: #FFB300;
    --icon-edge: rgba(255, 255, 255, 0.10);
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0B;
  --text: #EDEDEC;
  --muted: #9C9CA4;
  --rule: #232327;
  --brand: #FFB300;
  --icon-edge: rgba(255, 255, 255, 0.10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;          /* iOS body size; nothing on the site is under 16px */
  line-height: 1.5;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--muted); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* Header: the site icon and the name, nothing else. */
.site-header { padding: 20px 0; }
.home { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; }
.home img { width: 28px; height: 28px; border-radius: 7px; }

/* App icon: the iOS shape approximated with a 22.37% radius, and a hairline so
   a light icon does not dissolve into a light page. */
.icon { border-radius: 22.37%; box-shadow: 0 0 0 1px var(--icon-edge); flex: none; }

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- Hub ---------- */
.hub-title { font-size: 30px; max-width: 20em; padding: 40px 0 0; }
.hub-sub { margin-top: 16px; font-size: 19px; color: var(--muted); max-width: 32em; }
.apps { padding-top: 56px; }
.section-head { font-size: 22px; }

.app-row { position: relative; padding: 40px 0 48px; display: grid; gap: 28px; }
.app-row + .app-row { border-top: 1px solid var(--rule); }
.app-row .icon { width: 96px; height: 96px; }
.app-row h3 { font-size: 28px; margin-top: 20px; }
.app-row h3 a { text-decoration: none; }
/* The whole row is one tap target: the name link is stretched over it, so a
   tap on the icon or a screenshot opens the app page too. */
.app-row .row-link::after { content: ""; position: absolute; inset: 0; }
.app-row:hover .row-link { text-decoration: underline; text-decoration-thickness: 2px; }
.app-row .for { margin-top: 8px; font-size: 19px; font-weight: 600; max-width: 26em; }
.app-row .problem { margin-top: 12px; color: var(--muted); max-width: 30em; }
.app-row .line { margin-top: 12px; max-width: 30em; }
.app-row .more { position: relative; display: inline-block; margin-top: 8px; padding: 10px 0; }
.app-row .shots-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-row .shots-mini li:nth-child(3) { display: none; }
.shots-mini img, .shots img { border-radius: 14px; box-shadow: 0 0 0 1px var(--icon-edge); }
.app-row.no-shots { padding-bottom: 8px; }
.apps-next { padding-top: 24px; }
.apps-next .section-head { padding-top: 40px; border-top: 1px solid var(--rule); }

.policies h2 { font-size: 22px; }

.policies { padding-top: 56px; }
.policies dl { margin: 20px 0 0; }
.policies dt { font-weight: 600; margin-top: 16px; }
.policies dd { margin: 0; display: flex; flex-wrap: wrap; column-gap: 24px; }
.policies dd a { display: inline-block; padding: 10px 0; }

.site-footer { margin-top: 72px; padding: 32px 0 56px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 16px; }
.site-footer p + p { margin-top: 8px; }
.site-footer p { max-width: 48em; }

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .hub-title { font-size: 44px; padding-top: 72px; }
  .app-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: center; padding: 72px 0; }
  .app-row.no-shots { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .app-row .icon { width: 128px; height: 128px; }
  .apps { padding-top: 64px; }
  .apps .app-row:first-of-type { padding-top: 48px; }
  .apps-next { padding-top: 24px; }
  .apps-next .section-head { padding-top: 56px; }
  .app-row h3 { font-size: 36px; margin-top: 24px; }
  .app-row .shots-mini { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .app-row .shots-mini li:nth-child(3) { display: block; }
  .policies dl { display: grid; grid-template-columns: 16em 1fr; column-gap: 24px; align-items: baseline; }
  .policies dt { margin-top: 0; padding: 10px 0; }
}

/* ---------- App page ---------- */
.hero { padding: 32px 0 0; }
.hero .icon { width: 112px; height: 112px; }
.hero .app-name { margin-top: 28px; font-size: 19px; font-weight: 600; color: var(--accent); }
.hero h1 { font-size: 34px; margin-top: 8px; letter-spacing: -0.025em; max-width: 17em; }
.hero .value { margin-top: 16px; font-size: 19px; line-height: 1.45; color: var(--muted); max-width: 32em; }
.store { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
/* Apple: badge at least 40px high on screen, clear space a quarter of its height. */
.badge { display: inline-block; padding: 12px 0; line-height: 0; }
.badge img { height: 48px; width: auto; }
.store-notes { color: var(--muted); font-size: 16px; max-width: 30em; }
.store-notes p + p { margin-top: 4px; }

/* Phones: a deliberate sideways strip that snaps to the gutter, and the next
   shot shows at the edge so the strip reads as more. Wide screens: all five
   shots in one calm row, no scrolling. */
.shots {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter);
  margin: 48px auto 0;
  max-width: var(--page);
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shots li { flex: none; width: 70vw; max-width: 280px; scroll-snap-align: start; }

.about { margin-top: 72px; }
.feature { padding: 24px 0; }
.feature + .feature { border-top: 1px solid var(--rule); }
.feature h3 { font-size: 19px; color: var(--accent); }
.feature p { margin-top: 6px; max-width: var(--measure); }
.for-whom { margin-top: 48px; font-size: 19px; max-width: 32em; }
.caveat { margin-top: 56px; color: var(--muted); max-width: var(--measure); }

.faq { margin-top: 72px; }
.faq h2 { font-size: 26px; }
.qa { padding: 24px 0; }
.qa + .qa { border-top: 1px solid var(--rule); }
.qa h3 { font-size: 19px; }
.qa p { margin-top: 6px; max-width: var(--measure); }

.again { margin-top: 48px; font-size: 19px; }
.again a { display: inline-block; padding: 10px 0; font-weight: 600; }
.help { margin-top: 64px; }
.help h2 { font-size: 22px; }
.help ul { margin-top: 8px; display: flex; flex-wrap: wrap; column-gap: 24px; }
.help a { display: inline-block; padding: 10px 0; }

@media (min-width: 720px) {
  .hero { padding-top: 56px; }
  .hero .icon { width: 160px; height: 160px; }
  .hero .app-name { margin-top: 36px; font-size: 21px; }
  .hero h1 { font-size: 52px; }
  .hero .value { font-size: 21px; }
  .shots { margin-top: 72px; gap: 20px; overflow: visible; }
  .shots li { width: auto; max-width: none; flex: 1 1 0; min-width: 0; }
  .shots img { border-radius: 18px; }
  /* Six features in two columns: the deck gives them no section heading, so
     the old heading-left column would sit empty. */
  .about { margin-top: 96px; }
  .features { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .feature + .feature { border-top: 0; }
  .feature:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .for-whom { margin-top: 40px; }
  .faq { margin-top: 112px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; }
  .faq h2 { font-size: 32px; grid-column: 1; grid-row: 1 / span 4; }
  .faq .qa { grid-column: 2; }
  .faq .qa:first-of-type { padding-top: 0; }
  .help { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; align-items: baseline; }
  .help ul { margin-top: 0; }
}

/* ---------- 404 ---------- */
.nf { padding-top: 40px; max-width: 32em; }
.nf h1 { font-size: 36px; }
.nf p { margin-top: 16px; }
.nf p a { display: inline-block; padding: 10px 0; }
@media (min-width: 720px) { .nf { padding-top: 88px; } .nf h1 { font-size: 48px; } }