/*
 * One stylesheet, no build step.
 *
 * This is three pages that change a few times a year. A bundler, a node
 * runtime and a deploy pipeline would all be machinery in service of nothing,
 * and each is a thing that can break between somebody clicking a link in an
 * App Store listing and the privacy policy appearing.
 *
 * Light only. The apps follow the reader's theme because people live in them;
 * a page somebody reads once does not need to.
 */

:root {
  --bg: #ffffff;
  --surface: #f7f8fa;
  --border: #e3e6eb;
  --text: #14181f;
  --muted: #5b6674;
  --green: #3f8f5f;
  --blue: #1f5da8;
  --radius: 10px;
  --measure: 34rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* --- header --- */

header {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
}

/* One mark, the company's own. This used to be the FinBeans and AuthBeans
   logos overlapped, which said "two of our products" where it needed to say
   "us", and left the site wearing a product's logo in the browser tab. */
.brand .mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font-size: 0.92rem;
}

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

nav a:hover,
nav a[aria-current="page"] {
  color: var(--text);
}

/* --- type --- */

main {
  padding: 48px 0 72px;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

h2 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 40px 0 10px;
}

h3 {
  font-size: 1rem;
  margin: 26px 0 6px;
}

p,
li {
  max-width: var(--measure);
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  margin-top: 0;
}

a {
  color: var(--blue);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.9rem;
}

/* --- products --- */

.products {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.product {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-width: none;
}

.product img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex: none;
}

.product h3 {
  margin: 0 0 2px;
}

.product p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* A product that does not exist yet says so, rather than being described in
   the present tense alongside two that do. */
.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* --- footer --- */

footer {
  border-top: 1px solid var(--border);
  padding: 24px 0 48px;
  color: var(--muted);
  font-size: 0.9rem;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

footer .spacer {
  flex: 1;
}

/* --- policy tables --- */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: 0.94rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--surface);
  font-weight: 600;
}

@media (max-width: 34rem) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 1.6rem;
  }
  /* Tables of "what we collect" are the part people actually read on a phone,
     so they scroll rather than shrink to unreadable. */
  .scroll {
    overflow-x: auto;
  }
}

/* --- the FinBeans feature block --- */

/* One product gets room and the others get a card. FinBeans is what somebody
   arriving here has come to look at, and a list that gives equal space to the
   thing that exists and the thing that does not is a list that undersells the
   first. */
.feature {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 24px 4px;
  margin: 28px 0 0;
}

/* A link, because the product name is the most obvious thing to click and it
   used to do nothing. The arrow says so without a second line of text. */
.feature-head {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.feature-head .go {
  color: var(--muted);
  font-size: 1.1rem;
  transition: transform 0.12s ease;
}

.feature-head:hover .go,
.feature-head:focus-visible .go {
  transform: translateX(3px);
  color: var(--green);
}

.feature-head:hover h2 {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feature-head img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

.feature-head h2 {
  margin: 0;
}

.feature h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}

/* Screenshots scroll sideways rather than shrinking. Three phone screens
   squeezed into a phone's width are three things nobody can read. */
.shots {
  display: flex;
  gap: 14px;
  margin: 20px 0 6px;
  overflow-x: scroll;
  padding-bottom: 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* WebKit hides overlay scrollbars until something moves. Giving the track a
   size and a colour makes it a permanent part of the layout instead. */
.shots::-webkit-scrollbar {
  height: 8px;
  -webkit-appearance: none;
}

.shots::-webkit-scrollbar-track {
  background: transparent;
}

.shots::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.shots::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

.shots figure {
  margin: 0;
  flex: none;
  width: 190px;
  scroll-snap-align: start;
}

.shots img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #11151c;
}

.shots figcaption {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}

.shots-note {
  margin-top: 0;
}

/* --- people --- */

.people {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.person {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.person h3 {
  margin: 0 0 2px;
}

.person p {
  margin: 0;
}

.role {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  margin-left: 8px;
}

.addr {
  font-size: 0.8rem;
  color: var(--muted);
}