/* ---------------------------------------------------------------------------
   Fotufilm — project site.

   Simple and minimal: one rounded sans (Nunito), a strictly grayscale palette,
   generous whitespace, no ornament. The only colour on the page comes from the
   photographs themselves, which is the point of the product.

   Static CSS with no build step, served straight from /docs by GitHub Pages.
   --------------------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --surface: #f4f4f4;
  --line: #e6e6e6;
  --line-strong: #cccccc;
  --ink: #131313;
  --ink-dim: #5e5e5e;
  --ink-faint: #949494;
  --bezel: #1a1a1a;
  --shadow: rgba(0, 0, 0, 0.14);

  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;
  --radius: 14px;
  --measure: 720px;
}

* {
  box-sizing: border-box;
  margin: 0;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- layout ---------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px 0;
}

.brand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.brand em {
  font-style: normal;
  color: var(--ink-faint);
}

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-size: 15px;
}

.masthead nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.masthead nav a:hover,
.masthead nav a[aria-current='page'] {
  color: var(--ink);
}

/* ---------- typography ---------- */

h1,
h2,
h3 {
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h1 {
  font-size: clamp(32px, 5.4vw, 44px);
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 17px;
  font-weight: 700;
}

p {
  color: var(--ink-dim);
}

p + p {
  margin-top: 16px;
}

p strong,
li strong {
  color: var(--ink);
  font-weight: 700;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  font-weight: 600;
  transition: text-decoration-color 0.15s;
}

a:hover {
  text-decoration-color: var(--ink);
}

code {
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.94em;
  color: var(--ink);
  background: var(--surface);
  border-radius: 6px;
  padding: 1px 6px;
}

section {
  padding: 44px 0;
  border-top: 1px solid var(--line);
}

section > h2 {
  margin-bottom: 14px;
}

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

.hero {
  padding: 40px 0 52px;
}

.hero .lede {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.65;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 13px;
  margin-bottom: 18px;
}

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

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.btn {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
  background: var(--surface);
  text-decoration: none;
}

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

.btn.primary:hover {
  background: #3a3a3a;
}

.btn.muted {
  color: var(--ink-faint);
  border-style: dashed;
  cursor: default;
}

.btn.muted:hover {
  background: transparent;
}

/* Grid items default to min-width:auto, which for a figure wrapping an image
   resolves to the image's intrinsic width — enough to push these three-column
   grids wider than a phone viewport. Let them shrink instead. */
.compare > figure,
.shots > figure,
.strip > figure {
  min-width: 0;
}

/* ---------- before / after ---------- */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

.compare.three {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.compare.four {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Five across would be 128px a panel — the measure is capped at 720px, so a
   wider screen buys nothing and every frame just gets smaller. Three columns
   over two rows runs them at 216px instead, larger than the four-up row, which
   is what a comparison of sky colour and highlight rolloff actually needs. */
.compare.five {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Four portrait frames get too narrow to read on a phone; two rows of two
   keeps every panel comparable. */
@media (max-width: 620px) {
  .compare.four,
  .compare.five {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.compare figure {
  margin: 0;
}

.compare img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--surface);
}

.compare figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-dim);
}

.compare figcaption b {
  color: var(--ink);
  font-weight: 700;
}

/* A slim band of sample renders — no phone frame, since these are output rather
   than app UI. */
.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.strip figure {
  margin: 0;
}

.strip img {
  width: 100%;
  height: 155px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.strip figcaption {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 1:1 detail crops ---------- */

.crops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.crops.two {
  grid-template-columns: repeat(2, 1fr);
  /* 300 + 12 + 300, so these also sit at 1:1 on a wide screen. */
  max-width: 612px;
}

.crops > figure {
  margin: 0;
  min-width: 0;
}

.crops img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.crops figcaption {
  margin-top: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.crops figcaption span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
}

h3.sub {
  margin-top: 44px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 800;
}

/* ---------- app screenshots ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}

@media (max-width: 620px) {
  .shots {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .shots figure:last-child {
    display: none;
  }
}

.shot {
  margin: 0;
}

/* A plain phone: thin dark bezel, no notch furniture. */
.phone {
  aspect-ratio: 9 / 19.5;
  border-radius: 30px;
  background: var(--bezel);
  padding: 5px;
  box-shadow: 0 10px 26px -12px var(--shadow);
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
  display: block;
}

.shot figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  line-height: 1.4;
}

.shot figcaption span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
}

.caption {
  margin-top: 24px;
  font-size: 14px;
  color: var(--ink-dim);
}

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

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}

@media (max-width: 560px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
}

.card h3 {
  margin-bottom: 6px;
}

.card p {
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- simple lists ---------- */

.steps {
  list-style: none;
  padding: 0;
  margin-top: 22px;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 13px 0 13px 44px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
}

.steps li:first-child {
  border-top: 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
}

.steps li b {
  color: var(--ink);
  font-weight: 700;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

.tags li {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 15px;
}

.tags li b {
  color: var(--ink);
  font-weight: 700;
}

pre {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--ink);
  margin-top: 24px;
}

pre .c {
  color: var(--ink-faint);
  font-weight: 400;
}

/* ---------- document pages (privacy, support) ---------- */

.doc {
  padding: 32px 0 8px;
}

.doc .stamp {
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: 12px;
}

.doc h1 {
  margin-bottom: 4px;
}

/* The single claim the policy rests on. */
.claim {
  margin: 30px 0 4px;
  background: var(--surface);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.claim p {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.doc section h2 {
  margin-bottom: 12px;
}

.doc ul {
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--ink-dim);
}

.doc li + li {
  margin-top: 8px;
}

.doc li::marker {
  color: var(--ink-faint);
}

.doc h3 {
  margin: 24px 0 8px;
}

/* ---------- disclosure table ---------- */

.table {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

thead th {
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
  background: var(--surface);
  padding: 11px 16px;
}

tbody td {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  vertical-align: top;
}

tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
}

/* Never colour alone: the word says it, the tick reinforces it. */
td .no {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

td .no::before {
  content: '✓ ';
  color: var(--ink-faint);
}

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

footer {
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding: 26px 0 44px;
  display: flex;
  gap: 14px 26px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: var(--ink-faint);
}

footer nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

footer a {
  color: var(--ink-dim);
  font-weight: 600;
  text-decoration: none;
}

footer a:hover {
  color: var(--ink);
}

/* ---------- dark mode, following the reader's system setting ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101010;
    --surface: #1b1b1b;
    --line: #292929;
    --line-strong: #414141;
    --ink: #ededed;
    --ink-dim: #a2a2a2;
    --ink-faint: #737373;
    --bezel: #2a2a2a;
    --shadow: rgba(0, 0, 0, 0.6);
  }

  .btn.primary {
    background: var(--ink);
    border-color: var(--ink);
    color: #101010;
  }

  .btn.primary:hover {
    background: #ffffff;
  }
}

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