/* Pigeon Post for Gmail: project site. Same palette as the extension (src/tokens.css): cool stationery paper, blue-black ink, airmail red and blue. */
:root {
  color-scheme: light dark;
  --paper: #f3f5f9;
  --sheet: #ffffff;
  --ink: #1a2233;
  --muted: #5c6578;
  --rule: #dce1e9;
  --wash: #e9edf4;
  --blue: #1e47a8;
  --red: #d2382c;
  --on-color: #ffffff;
  --shadow: 0 24px 60px -18px rgba(26, 34, 51, .30), 0 2px 6px rgba(26, 34, 51, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo",
    "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Microsoft JhengHei UI", "Microsoft YaHei UI", "Malgun Gothic", sans-serif;
  --display: var(--font);
  --airmail: repeating-linear-gradient(-45deg, var(--red) 0 16px, var(--sheet) 16px 26px, var(--blue) 26px 42px, var(--sheet) 42px 52px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151b27;
    --sheet: #1c2332;
    --ink: #e6e9f0;
    --muted: #9aa3b5;
    --rule: #2d3649;
    --wash: #252e40;
    --blue: #8ea9ff;
    --red: #ff7d70;
    --on-color: #151b27;
    --shadow: 0 24px 60px -18px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 750; text-wrap: balance; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ---------- Header ---------- */
.masthead { display: flex; align-items: center; gap: 16px; padding-block: 18px; }
.wordmark { display: flex; align-items: center; gap: 10px; margin-right: auto; color: inherit; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 18px; }
.wordmark img { width: 30px; height: 30px; }
.masthead > a:not(.wordmark, .tip) { color: var(--muted); text-decoration: none; font-size: 15px; }
.masthead > a:not(.wordmark, .tip):hover { color: var(--ink); }

.lang { position: relative; font-size: 15px; }
.lang summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 4px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); color: var(--ink);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { flex: none; }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 160px;
  margin: 0; padding: 6px; list-style: none;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow);
}
.lang li a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.lang li a:hover { background: var(--wash); }
.lang li a[aria-current] { font-weight: 700; }

/* ---------- Hero: an airmail envelope with the popup sliding out of it ---------- */
.envelope {
  position: relative; margin-top: 8px; padding: 12px; border-radius: 16px;
  background: var(--airmail);
}
.letter {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 40px;
  padding: 64px 56px 0; border-radius: 8px; background: var(--sheet);
  min-height: 600px; overflow: hidden;
}
.hero-copy { align-self: center; padding-bottom: 64px; max-width: 34em; }
.hero-copy h1 { font-size: clamp(42px, 6vw, 68px); font-weight: 780; letter-spacing: -0.03em; text-wrap: balance; }
.hero-copy .lede { margin-top: 22px; font-size: 20px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 22px;
  border-radius: 10px; background: var(--ink); color: var(--paper);
  font-weight: 650; text-decoration: none;
}
.btn:hover { opacity: .9; }
.btn img { width: 22px; height: 22px; }
.fine { margin-top: 18px; font-size: 14.5px; color: var(--muted); }

.hero-shot { position: relative; margin: 0; height: 0; min-height: 100%; }
.hero-shot img {
  display: block; width: 390px; margin-top: 128px; border-radius: 12px 12px 0 0;
  border: 1px solid var(--rule); border-bottom: 0; box-shadow: var(--shadow);
}

/* The stamp: the toolbar icon with its badge, on paper perforated only along the edges */
.stamp {
  position: absolute; top: 28px; right: 36px; z-index: 2;
  width: 116px; height: 136px; padding: 7px;
  background: var(--wash); transform: rotate(4deg);
  -webkit-mask: radial-gradient(circle 4.5px, transparent 97%, #000) -7px -7px / 14px 14px round, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle 4.5px, transparent 97%, #000) -7px -7px / 14px 14px round, linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 2px 4px rgba(26, 34, 51, .28));
}
.stamp div {
  position: relative; height: 100%; display: grid; place-items: center; margin: 3px;
  border: 1px solid var(--rule); background: var(--sheet);
}
.stamp img { width: 56px; height: 56px; }
.stamp b {
  position: absolute; right: 10px; bottom: 18px;
  padding: 0 6px; border-radius: 6px; background: var(--red); color: #fff;
  font: 700 14px/20px var(--font);
}
.stamp.pop b { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 40% { transform: scale(1.35); } }

/* ---------- Sections ---------- */
section.band { padding-block: 104px 0; }
.intro { max-width: 40em; }
.intro p { margin-top: 16px; font-size: 19px; color: var(--muted); }

/* Levels demo */
.demo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; margin-top: 40px; }
.folders { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; }
.folder { display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 16px; border-left: 4px solid transparent; }
.folder + .folder { border-top: 1px solid var(--rule); }
.folder[data-level="count"] { border-left-color: var(--blue); }
.folder[data-level="notify"] { border-left-color: var(--red); }
.folder:first-child { border-top-left-radius: 13px; }
.folder:last-child { border-bottom-left-radius: 13px; }
.folder-name { flex: 1; min-width: 0; }
.folder-name strong { display: block; font-weight: 600; }
.folder-name small { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }
.folder .n { font-weight: 700; min-width: 1.5em; text-align: right; }
.seg { display: inline-flex; margin: 0; padding: 3px; border: 0; border-radius: 9px; background: var(--wash); }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 4px 11px; border-radius: 7px; font-size: 14px; color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; }
.seg input:hover + span { color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.seg input:checked + span { background: var(--sheet); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgba(26, 34, 51, .12); }
.seg input[value="count"]:checked + span { background: var(--blue); color: var(--on-color); }
.seg input[value="notify"]:checked + span { background: var(--red); color: var(--on-color); }
.legend { display: grid; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.legend b { display: inline-block; min-width: 5.5em; margin-right: 8px; color: var(--ink); }

.preview { display: grid; align-content: start; gap: 14px; }
.preview h3 { font-size: 16px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.toolbar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 14px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.toolbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.toolbar > span:not(.tb) { flex: 1; height: 22px; border-radius: 11px; background: var(--wash); }
.tb { position: relative; width: 24px; height: 24px; }
.tb img { width: 20px; height: 20px; margin: 2px; }
.tb b { position: absolute; right: -9px; bottom: -5px; min-width: 18px; padding: 0 4px; border-radius: 4px; background: var(--red); color: #fff; font-size: 11px; line-height: 15px; font-weight: 700; text-align: center; }
.tb b:empty { display: none; }
.tb.pop b { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.caption { font-size: 15px; color: var(--muted); }

/* Desktop notification */
.note {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px;
  padding: 14px 16px 0; border-radius: 16px; background: var(--sheet);
  border: 1px solid var(--rule); box-shadow: var(--shadow);
  transition: opacity .25s, transform .25s;
}
.note img { width: 44px; height: 44px; grid-row: span 3; }
.note strong { font-weight: 650; }
.note .subject, .note strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note small { color: var(--muted); font-size: 13.5px; padding-bottom: 12px; }
.note .act { grid-column: 1 / -1; margin: 0 -16px; padding: 10px; border-top: 1px solid var(--rule); text-align: center; font-size: 15px; font-weight: 600; color: var(--blue); }
.note.silent { opacity: .35; transform: scale(.97); filter: grayscale(1); }

/* Two-column feature rows */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 40px; }
.split .shot img { display: block; width: 390px; margin-inline: auto; border-radius: 12px; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.points { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.points li { padding-left: 20px; border-left: 3px solid var(--rule); }
.points li:nth-child(odd) { border-left-color: var(--red); }
.points li:nth-child(even) { border-left-color: var(--blue); }
.points p { color: var(--muted); margin-top: 4px; }
.notes { display: grid; gap: 16px; max-width: 420px; margin-inline: auto; width: 100%; }

/* Privacy: plain facts on a sheet with an airmail edge */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; margin-top: 40px; padding: 40px 44px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; border-top: 6px solid transparent; border-image: var(--airmail) 6 0 0 0 / 6px 0 0 0; }
.facts p { margin-top: 6px; color: var(--muted); }
.facts + p { margin-top: 18px; }

/* Getting started: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 50%; border: 2px solid var(--ink); font: 700 18px/1 var(--display);
}
.steps p { margin-top: 6px; color: var(--muted); }

/* ---------- Privacy policy (rendered from PRIVACY.md) ---------- */
.doc { max-width: 46em; padding-top: 40px; }
.doc h1 { font-size: clamp(32px, 4.5vw, 44px); font-weight: 780; margin-bottom: 24px; }
.doc h2 { font-size: 24px; margin: 44px 0 12px; }
.doc h3 { margin: 28px 0 8px; }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li + li { margin-top: 6px; }
.doc code { font-size: .88em; padding: 1px 5px; border-radius: 5px; background: var(--wash); overflow-wrap: anywhere; }
.doc hr { border: 0; height: 6px; margin: 48px 0; background: var(--airmail); border-radius: 3px; }
.doc .table { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.doc th, .doc td { padding: 10px 14px; text-align: left; vertical-align: top; }
.doc th { font-weight: 650; background: var(--wash); }
.doc tr + tr td, .doc tbody tr:first-child td { border-top: 1px solid var(--rule); }
.doc-note { padding: 12px 16px; border-left: 3px solid var(--blue); background: var(--sheet); border-radius: 0 8px 8px 0; color: var(--muted); font-size: 15px; }
.doc-status { color: var(--muted); }
.doc-foot { max-width: 46em; margin-top: 32px; }

/* ---------- Footer ---------- */
footer { margin-top: 120px; padding-block: 40px 56px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; }
.foot .langs { justify-content: flex-end; }
.support { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.tip:hover { border-color: var(--muted); }
.tip img { width: 24px; height: 24px; margin-left: -4px; border-radius: 6px; }
.head-tip { min-height: 34px; padding: 4px 12px; font-size: 15px; }

/* Closing support section: the Bytes & Boba cup next to a short ask */
.tipjar {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 36px; align-items: center;
  padding: 40px 44px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px;
}
.tipjar > img { width: 120px; height: 120px; border-radius: 30px; }
.tipjar p { max-width: 38em; margin-top: 12px; color: var(--muted); font-size: 18px; }
.tipjar .actions { margin-top: 24px; }
.tipjar .btn img { border-radius: 5px; }
.tipjar .fine { margin-top: 12px; font-size: 14.5px; }
.foot .langs a { color: var(--muted); text-decoration: none; }
.foot .langs a:hover, .foot .langs a[aria-current] { color: var(--ink); }
.tm { margin-top: 28px; font-size: 13.5px; }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .letter { grid-template-columns: 1fr; padding: 48px 24px 0; gap: 24px; min-height: 0; }
  .hero-copy { padding-bottom: 0; }
  .hero-shot { justify-self: center; max-width: 100%; height: auto; min-height: 0; }
  .hero-shot img { margin-top: 0; max-height: 460px; object-fit: cover; object-position: top; }
  .stamp { width: 84px; height: 100px; top: 14px; right: 14px; }
  .stamp img { width: 40px; height: 40px; }
  .stamp b { font-size: 12px; line-height: 17px; right: 8px; bottom: 16px; }
  .hero-copy h1 { margin-top: 64px; font-size: clamp(36px, 10vw, 42px); }
  .demo, .split, .foot { grid-template-columns: 1fr; }
  .split .shot { order: 2; }
  .facts { grid-template-columns: 1fr; padding: 28px 24px; }
  .steps { grid-template-columns: 1fr; }
  .tipjar { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
  .tipjar > img { width: 88px; height: 88px; border-radius: 22px; }
  .foot .langs { justify-content: flex-start; }
  section.band { padding-top: 80px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .envelope { padding: 8px; }
  .folder { flex-wrap: wrap; }
  .folder-name { flex-basis: calc(100% - 3em); }
  .folder .seg { margin-left: auto; }
  .masthead > a:not(.wordmark, .head-tip) { display: none; }
  .head-tip span { display: none; }
  .head-tip { padding: 4px 8px; }
  .head-tip img { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}