/* AI Triage website: one stylesheet for every page.
   The look follows the add-on: its indigo-to-violet icons, cool paper, and
   Thunderbird's own tag colors for the tag pills. The brand gradient appears
   once, as the progress bar of the inbox in the hero, as in the add-on. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --paper: #f7f7fc;
  --panel: #ffffff;
  --ink: #22203a;
  --muted: #5c5a74;
  --line: #dddcea;
  --violet: #5b3fe0;
  --violet-hover: #4a2fcc;
  --violet-soft: #ece8ff;
  --on-violet: #ffffff;
  --brand-gradient: linear-gradient(90deg, #666aed, #8e61ff);
  --tag-mix: #101014;
  --tag-bg-share: 15%;
  --tag-ink-share: 42%;
  --shadow: 0 18px 40px -18px rgba(54, 40, 120, 0.28);
  --radius: 6px;
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17162a;
    --panel: #201f36;
    --ink: #e7e5f8;
    --muted: #aaa8c4;
    --line: #34324f;
    --violet: #b39cff;
    --violet-hover: #c9b8ff;
    --violet-soft: #2c2752;
    --on-violet: #17162a;
    --tag-mix: #ffffff;
    --tag-bg-share: 22%;
    --tag-ink-share: 55%;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: var(--violet); text-underline-offset: 0.18em; }
a:hover { color: var(--violet-hover); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 2px; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* ---- Header and footer ---- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; }
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.975rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

.site-footer { margin-top: 96px; border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: 0.925rem; }
.site-footer .wrap { display: grid; gap: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { color: var(--ink); }
.site-footer p { margin: 0; max-width: 70ch; }

/* ---- Light and dark icons ---- */
.icon-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .icon-light { display: none; }
  .icon-dark { display: block; }
}

/* ---- Type ---- */
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.25rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.lede { font-size: 1.2rem; line-height: 1.55; color: var(--muted); max-width: 54ch; }

/* ---- Buttons ---- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.button {
  display: inline-block; padding: 12px 20px; border-radius: var(--radius);
  background: var(--violet); color: var(--on-violet); text-decoration: none;
  font-weight: 600; font-size: 1rem; line-height: 1.2;
}
.button:hover { background: var(--violet-hover); color: var(--on-violet); }
.note { color: var(--muted); font-size: 0.95rem; }

/* ---- Hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 72px 0 40px; }
.hero h1 { max-width: 11ch; margin-bottom: 22px; }
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; }
}

/* The inbox: Thunderbird's message list while the AI reads it. On load the
   tags land one email after another, as they do in the add-on. */
.inbox { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; font-size: 0.95rem; }
.inbox-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; font-weight: 650; }
.inbox-count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.inbox-progress { height: 3px; background: var(--line); }
.inbox-progress span { display: block; height: 100%; width: 100%; background: var(--brand-gradient); transform-origin: left; }
.inbox ul { list-style: none; margin: 0; padding: 0; }
.inbox li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 11px 18px; border-top: 1px solid var(--line); }
.inbox li:first-child { border-top: 0; }
.mail-subject { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-from { grid-column: 1; color: var(--muted); font-size: 0.875rem; }
.inbox .pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.inbox-foot { padding: 12px 18px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.inbox-foot strong { color: var(--ink); font-weight: 650; }

/* A Thunderbird tag: a tint of its own color, its text a deeper shade. */
.pill {
  --c: #8a8aa0;
  display: inline-block; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 0.8rem; font-weight: 600; line-height: 1.5;
  background: color-mix(in srgb, var(--c) var(--tag-bg-share), transparent);
  color: color-mix(in srgb, var(--c) calc(100% - var(--tag-ink-share)), var(--tag-mix));
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.pill.important { --c: #ff0000; }
.pill.work { --c: #ff9900; }
.pill.personal { --c: #009900; }
.pill.todo { --c: #3333ff; }
.pill.later { --c: #993399; }
.pill.other { --c: #8a8aa0; }

@media (prefers-reduced-motion: no-preference) {
  .inbox-progress span { animation: read 2.6s cubic-bezier(0.3, 0.1, 0.3, 1) 0.4s both; }
  .inbox .pill { animation: tag 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.6s + var(--i) * 0.34s); }
  .inbox-foot { animation: fade 0.5s ease both; animation-delay: 3.1s; }
}
@keyframes read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tag { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Sections of the home page ---- */
.section { padding-top: 88px; }
.section > h2 { margin-bottom: 14px; }
.section > .lede { margin-bottom: 36px; }

.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.jobs li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.jobs img { width: 40px; height: 40px; }
.jobs h3 { margin-bottom: 6px; }
.jobs p { margin: 0; color: var(--muted); max-width: 46ch; }
@media (max-width: 720px) { .jobs { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.split h3 { margin-bottom: 10px; }
.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 1px solid var(--line); }

/* Pricing: what stays free, and what the license adds. */
.price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; }
.price { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.plan { padding: 26px 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.plan.pro { border-color: color-mix(in srgb, var(--violet) 45%, var(--line)); }
.plan h3 { margin-bottom: 4px; }
.plan > p { color: var(--muted); }
.plan ul { margin: 14px 0 0; padding-left: 1.1em; }
.plan li { margin: 6px 0; }
.plan li::marker { color: var(--violet); }

/* ---- Document pages: privacy, terms, support ---- */
.doc { max-width: 68ch; padding-top: 56px; }
.doc h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); margin-bottom: 10px; }
.doc .updated { color: var(--muted); margin-bottom: 36px; }
.doc h2 { font-size: 1.4rem; margin: 40px 0 10px; }
.doc h3 { margin: 24px 0 6px; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }
.contact-box { margin: 8px 0 28px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.contact-box p:last-child { margin-bottom: 0; }
.contact-box .address { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }