/* K17: the landing site. Same design rules as the extension: Classic blue (the icon's) as the
   accent (pink only as a small highlight), the system font, spacing 4 / 8 / 12 / 16 /
   24 / 32 / 48 px, light and dark. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --bg: #f6f7fb; --surface: #ffffff; --border: #e1e5f2;
  --text: #1d2233; --text-muted: #555d75;
  --accent: #4255c9; --accent-soft: #e7ebff; --on-accent: #ffffff; --pink: #e0457b;
  --amber: #8a5a00; --amber-soft: #fdf1d8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12141c; --surface: #1b1e2a; --border: #30354a;
    --text: #edf0fa; --text-muted: #b3bad0;
    --accent: #9aabff; --accent-soft: #263055; --on-accent: #10142a; --pink: #ff8fb3;
    --amber: #f2c48d; --amber-soft: #3a2a12;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); }
a { color: var(--accent); }
.wrap { width: min(960px, 100%); margin: 0 auto; padding: 0 var(--s4); }
header.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; }
header.top .brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--text); text-decoration: none; }
header.top .brand img { border-radius: 6px; }
header.top nav { display: flex; gap: var(--s4); font-size: 14px; }
header.top nav a { color: var(--text-muted); text-decoration: none; }
.hero { padding: var(--s7) 0 var(--s6); text-align: center; }
.hero-icon { display: block; margin: 0 auto var(--s4); border-radius: 15px; }
.hero h1 { margin: 0 0 var(--s3); font-size: clamp(32px, 6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.hero p { margin: 0 auto var(--s5); max-width: 560px; color: var(--text-muted); font-size: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s5); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.note { margin-top: var(--s3); color: var(--text-muted); font-size: 14px; }
.hero .actions + .note { margin: var(--s5) auto 0; font-size: 15px; } /* same gap below the buttons as above them */
.shots { display: grid; gap: var(--s5); padding: var(--s6) 0; }
.shots figure { margin: 0; }
.shots .shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); }
.shots .shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.shots img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(29, 34, 51, 0.10); transition: transform 0.15s ease; }
.shots .shot:hover img { transform: translateY(-2px); }
.shots figcaption { margin-top: var(--s2); color: var(--text-muted); font-size: 14px; text-align: center; }
@media (min-width: 800px) { .shots { grid-template-columns: 1fr 1fr; } .shots figure:first-child { grid-column: 1 / -1; } }
section { padding: var(--s6) 0; border-top: 1px solid var(--border); }
section h2 { margin: 0 0 var(--s4); font-size: 24px; }
.faq details { padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: var(--s2) 0 0; color: var(--text-muted); }
.doc { padding-top: var(--s6); padding-bottom: var(--s6); max-width: 752px; }
.doc h1 { margin: 0 0 var(--s2); font-size: 32px; }
.doc h2 { margin: var(--s6) 0 var(--s2); font-size: 20px; }
.doc p, .doc li { color: var(--text); }
.draft { margin: var(--s4) 0; padding: var(--s3) var(--s4); border: 1px solid var(--amber); border-radius: var(--radius); background: var(--amber-soft); color: var(--text); font-size: 14px; }
/* Click a screenshot to see it full size */
.lightbox { width: min(1400px, 96vw); max-height: 94vh; padding: var(--s3); border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text-muted); }
.lightbox::backdrop { background: rgba(10, 12, 20, 0.78); }
.lightbox img { display: block; width: 100%; height: auto; max-height: calc(94vh - 80px); object-fit: contain; border-radius: 6px; }
.lightbox p { margin: var(--s2) 0 0; font-size: 14px; text-align: center; }
.lightbox-close { position: absolute; top: var(--s2); right: var(--s2); width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
footer { padding: var(--s6) 0 var(--s7); color: var(--text-muted); font-size: 14px; border-top: 1px solid var(--border); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s2); }
footer a { color: var(--text-muted); }

/* K17: "What it does": a bento grid. Wide tiles for the two big things, small ones for
   the rest, and privacy as a full-width highlighted tile. */
.what h2 { margin-bottom: var(--s1); }
.section-lead { margin: 0 0 var(--s5); color: var(--text-muted); }
.bento { display: grid; gap: var(--s3); grid-template-columns: repeat(4, 1fr); }
.tile { position: relative; padding: var(--s5); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29, 34, 51, 0.08); }
.tile-wide { grid-column: span 2; }
.tile h3 { margin: var(--s3) 0 var(--s1); font-size: 17px; }
.tile p { margin: 0; color: var(--text-muted); font-size: 15px; }
.tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.tile-wide .tile-icon { background: var(--accent); color: var(--on-accent); }
.tile-private { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); background: var(--accent-soft); border-color: transparent; }
.tile-private h3 { margin-top: 0; }
.tile-private p { color: var(--text-muted); }
.tile-private .tile-icon { flex: none; background: var(--surface); color: var(--accent); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .tile-wide { grid-column: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .tile-private { flex-direction: column; align-items: flex-start; } }

/* K17: patch notes (every version on updates.html; the latest on the home page) */
.lead { color: var(--text-muted); }
.updates { display: grid; gap: var(--s4); margin-top: var(--s5); }
.update { padding: var(--s5); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.update header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.update h2, .doc .update h2 { margin: 0; font-size: 19px; }
.update time { margin-left: auto; color: var(--text-muted); font-size: 14px; }
.update ul { margin: var(--s4) 0 0; padding: 0; list-style: none; }
.update li { position: relative; margin: 0 0 var(--s2); padding-left: 26px; color: var(--text); break-inside: avoid; }
.update li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%234255c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.update .more { margin: var(--s3) 0 0; font-size: 14px; font-weight: 600; }
.update .more a { text-decoration: none; }
.update .more a:hover { text-decoration: underline; }
.tag-latest { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.tag-latest::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--pink); vertical-align: 1px; }
.latest { padding: var(--s2) 0 0; border-top: 0; }
.latest:empty { display: none; }
.latest .kicker { margin: 0 0 var(--s3); color: var(--text-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.latest .update { box-shadow: 0 8px 24px rgba(29, 34, 51, 0.06); }
@media (min-width: 760px) { .latest .update ul { columns: 2; column-gap: var(--s6); } }