/* Postfach product site. One stylesheet, no framework. The colours are the
   icon's bronze palette (docs/icons/iconset-bronze/PALETTE.md): bronze for
   the accent, paper for the light ground; the rest follows the system's
   light and dark appearance. */

:root {
  --accent: #7d5411;
  --accent-dark: #5c3e0f;
  --on-accent: #f6f1ec;
  --bg: #f6f1ec;
  --panel: #ffffff;
  --text: #1c1c1e;
  --muted: #6b6b70;
  --line: #e7ded4;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  --radius: 14px;
  --max: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #cf9a4d;
    --accent-dark: #ddae6a;
    --on-accent: #3a270d;
    --bg: #131315;
    --panel: #1d1d20;
    --text: #f6f1ec;
    --muted: #a0a0a6;
    --line: #2c2c30;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }
/* A picture is only the WebP source around its img: the img stays the grid
   or flex child the layout rules below address. */
picture { display: contents; }
/* Otherwise the source is a grid item too, and takes the image's column. */
picture source { display: none; }

/* Keyboard focus, in the accent, on everything that takes it. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav a:focus-visible, .nav .submenu a:focus-visible, .nav-group-toggle:focus-visible { outline-offset: -2px; border-radius: 6px; }
.faq summary:focus-visible { outline-offset: -2px; border-radius: 6px; }
.button:focus-visible { outline-offset: 3px; }

/* The first Tab lands on a link past the header. */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.skip-link:focus { top: 12px; text-decoration: none; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
/* Japanese. Its own faces by name: on Windows Arial stands before the
   system's, and has no kana. A line never begins with a closing mark or a
   small kana (strict), and a headline breaks between phrases where the
   browser knows how (auto-phrase, Chrome and Edge) and in lines of like
   length everywhere else, since Japanese has no spaces to break at. Kanji
   want more room between lines than Latin letters, and no tightening. */
:lang(ja) body { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; line-break: strict; line-height: 1.75; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { line-height: 1.35; letter-spacing: 0; word-break: auto-phrase; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }

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

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); font-size: 1.05rem; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a { color: var(--text); font-weight: 500; font-size: 0.95rem; }
.nav a.current { color: var(--accent); }
.nav .lang { color: var(--muted); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; }
.nav .lang a { color: var(--muted); font-size: inherit; padding: 0; }
.nav .lang a.current { color: var(--text); font-weight: 700; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--text); font: inherit; }

/* Features: a menu of the feature pages under the header, opened by hover,
   by a click (touch), or by the keyboard; in the narrow menu the pages are
   listed under it. */
.nav-group { position: relative; }
.nav-group-toggle { background: none; border: 0; padding: 0; margin: 0; color: var(--text); font: inherit; font-weight: 500; font-size: 0.95rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-group-toggle::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.7; }
.nav-group-toggle.current { color: var(--accent); }
.submenu { display: none; position: absolute; top: calc(100% + 12px); left: -16px; min-width: 210px; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 0; box-shadow: var(--shadow); z-index: 20; }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav .submenu a { padding: 8px 18px; white-space: nowrap; }
.nav .submenu a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); text-decoration: none; }
.nav-group:hover .submenu, .nav-group:focus-within .submenu, .nav-group.open .submenu { display: flex; }

@media (max-width: 720px) {
  .nav { display: none; position: absolute; right: 24px; top: 60px; flex-direction: column; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 0; box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .nav a { padding: 10px 18px; }
  .nav .lang { padding: 10px 18px; }
  .nav .lang a { display: inline; }
  .nav-toggle { display: inline-block; }
  .nav-group-toggle { padding: 10px 18px; cursor: default; }
  .nav-group-toggle::after { display: none; }
  .submenu, .nav-group:hover .submenu { display: flex; position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 4px 14px; background: none; }
  .submenu::before { display: none; }
  .nav .submenu a { padding: 8px 18px; }
}

/* Buttons */
.button {
  display: inline-block; padding: 12px 20px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 1rem;
  border: 0; cursor: pointer; transition: background 0.15s ease;
}
.button:hover { background: var(--accent-dark); text-decoration: none; }
.button.secondary { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.button.secondary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Apple's App Store badges, as delivered (assets/badges/, the white ones
   for the dark appearance): both 48 points tall, a clear space of a
   quarter of that around each, no hover effect on the artwork, and the
   focus ring outside the clear space. Side by side, stacked below 560. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 12px 0; }
.badges.centered { justify-content: center; }
.badge { display: inline-block; line-height: 0; border-radius: 8px; }
.badge img { height: 48px; width: auto; display: block; }
.badge:hover { text-decoration: none; }
.badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 12px; }
@media (max-width: 560px) { .badges { flex-direction: column; align-items: flex-start; } .badges.centered { align-items: center; } }

/* Hero */
.hero { padding: 72px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hero .lede { font-size: 1.25rem; color: var(--muted); max-width: 34rem; }
.hero .fine { font-size: 0.9rem; color: var(--muted); margin-top: 14px; }
.hero .trial { font-size: 1.05rem; margin: 0 0 20px; }
.hero .trial strong { color: var(--accent); }
.trial-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; }
.hero-art { position: relative; }
.hero-art .mac { border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.hero-art .phone { position: absolute; right: -8px; bottom: -28px; width: 28%; border-radius: 22px; box-shadow: var(--shadow); border: 1px solid var(--line); }

@media (max-width: 860px) {
  .hero { padding-top: 40px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { margin-top: 12px; padding-bottom: 28px; }
}

/* Sections */
section { padding: 56px 0; }
section + section { border-top: 1px solid var(--line); }
.section-title { text-align: center; max-width: 40rem; margin: 0 auto 36px; }
.section-title p { color: var(--muted); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; }
.feature .glyph { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; font-size: 20px; }
.feature p { color: var(--muted); margin: 0; font-size: 0.97rem; }

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

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.split img { border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.split .phones { display: flex; gap: 16px; justify-content: center; }
.split .phones img { width: 46%; border-radius: 22px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } }

.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding-left: 28px; position: relative; margin-bottom: 10px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* The features that get one line each, two columns of them under the
   three cards, and the "Why not Apple Mail?" list. */
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; margin-top: 24px; color: var(--muted); font-size: 0.97rem; }
.feature-list strong { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .feature-list { grid-template-columns: 1fr; } }

/* The one line under the No servers card that points at the changelog. */
.feature .trust { margin-top: 12px; font-size: 0.9rem; }

/* Who makes Postfach, above the footer. */
.maker { text-align: center; }
.maker .wrap { max-width: 40rem; }
.maker h2 { font-size: 1.3rem; }
.maker .story { text-align: left; margin-top: 40px; }
.maker .story h3 { text-align: center; font-size: 1.1rem; margin-bottom: 16px; }
.maker .story .checks { margin: 0 0 16px; }

/* Feature pages (templates.html): placeholders as chips, keys, stacked shots */
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
kbd { font-family: inherit; font-size: 0.9em; background: var(--panel); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.tokens { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: baseline; margin: 0 0 1.2em; }
.tokens dt { margin: 0; }
.tokens dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.split img.narrow { max-width: 460px; justify-self: center; width: 100%; }
.split.wide-shot { grid-template-columns: 2fr 3fr; }
.split.wide-shot.reverse { grid-template-columns: 3fr 2fr; }
.button-row.centered { justify-content: center; }
.shot { border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); width: 100%; }
/* The Zimbra page's drawing of a ghost message in a list: markup, not a
   screenshot, so it says nothing of how any one mail program draws it. */
.ghost-demo { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.ghost-demo .row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ghost-demo .dot { grid-row: 1 / span 2; align-self: center; width: 9px; height: 9px; border-radius: 50%; }
.ghost-demo .unread .dot { background: var(--accent); }
.ghost-demo .from { font-weight: 600; }
.ghost-demo .date { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.ghost-demo .subject { grid-column: 2 / span 2; color: var(--muted); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghost-demo .ghost .from, .ghost-demo .ghost .subject { font-style: italic; }
.ghost-demo .ghost .from { color: var(--muted); }
.ghost-demo figcaption { padding: 10px 18px; font-size: 0.85rem; color: var(--muted); background: var(--bg); }

/* A film of the app's whole window. A window's corners are rounder than a
   picture's frame, and what was behind them is in the film, so the frame
   takes the window's own radius, 29 of 1330 points across and of 800 down. */
.shot.film { overflow: hidden; isolation: isolate; border-radius: 2.2% / 3.65%; line-height: 0; }
.film video { display: block; width: 100%; height: auto; }
.shot.medium, .shot.tall { display: block; margin-inline: auto; }
.shot.medium { max-width: 780px; }
.shot.tall { max-width: 480px; }
.page-hero { text-align: center; }
.page-hero .wrap { display: block; }
.page-hero .intro { max-width: 46rem; margin: 0 auto; }
.page-hero .lede { margin: 0 auto 24px; }
.page-hero .button-row { justify-content: center; }
.page-hero .shot { max-width: 940px; margin: 44px auto 0; }
.block .intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: start; margin-bottom: 32px; }
.split > * { min-width: 0; }
p code { white-space: normal; overflow-wrap: anywhere; }
.block .intro .tokens, .block .intro > .checks { margin-top: 64px; }
.shots-row { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start; }
@media (max-width: 860px) {
  .split.wide-shot, .split.wide-shot.reverse { grid-template-columns: 1fr; }
  .block .intro { grid-template-columns: 1fr; }
  .block .intro .tokens, .block .intro > .checks { margin-top: 0; }
  .shots-row { grid-template-columns: 1fr; }
}

/* A shot still to be taken: the page reads right without it. */
.shot-placeholder { border: 2px dashed var(--line); border-radius: 12px; padding: 48px 24px; text-align: center; color: var(--muted); font-size: 0.95rem; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.shot-placeholder strong { display: block; color: var(--text); margin-bottom: 4px; }
.page-hero .shot-placeholder { max-width: 940px; margin: 44px auto 0; }

/* The three ways a setup gets to another device (devices.html): a table,
   and on a narrow screen one block per way with each cell named. */
.ways { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ways table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.ways th, .ways td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ways thead th { background: var(--bg); color: var(--muted); font-size: 0.85rem; font-weight: 600; padding-block: 10px; }
.ways tbody th { font-weight: 600; width: 26%; }
.ways tbody th span { display: block; color: var(--muted); font-weight: 400; font-size: 0.9rem; }
.ways td { color: var(--muted); }
.ways tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 700px) {
  .ways thead { display: none; }
  .ways tbody tr { display: block; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .ways tbody tr:last-child { border-bottom: 0; }
  .ways tbody th, .ways td { display: block; width: auto; padding: 0; border: 0; }
  .ways tbody th { margin-bottom: 8px; }
  .ways td + td { margin-top: 6px; }
  .ways td::before { content: attr(data-label) ": "; color: var(--text); font-weight: 600; }
  :lang(fr) .ways td::before { content: attr(data-label) " : "; }
}

/* The Mac's keyboard shortcuts (support.html#shortcuts) */
.shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; max-width: 46rem; margin: 0 auto; }
.shortcuts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.shortcuts span { color: var(--muted); }
@media (max-width: 560px) { .shortcuts { grid-template-columns: 1fr; } }

/* The feature pages, named under each */
.more-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 28px; font-weight: 500; }

/* Pricing */
.price-card { max-width: 30rem; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; text-align: center; }
.price { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; }
.price small { font-size: 1rem; font-weight: 500; color: var(--muted); }

/* FAQ */
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 16px; color: var(--muted); max-width: 46rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Prose pages */
.prose { max-width: 46rem; margin: 0 auto; padding: 48px 24px 72px; }
.prose h1 { margin-bottom: 0.3em; }
.prose h2 { font-size: 1.4rem; margin-top: 2em; }
.prose .updated { color: var(--muted); font-size: 0.95rem; margin-bottom: 2em; }
.prose address { font-style: normal; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; display: inline-block; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.prose .shot { margin: 8px 0 20px; }
/* A section linked from the app (support-outlook.html#sending) lands below the sticky header. */
.prose h2[id], .prose [id] { scroll-margin-top: 80px; }
.prose ol { padding-left: 1.4em; }
.prose ol li { margin-bottom: 6px; }
.prose th, .prose td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.placeholder { background: #fff3c4; color: #5a4300; padding: 0 4px; border-radius: 4px; }
@media (prefers-color-scheme: dark) { .placeholder { background: #4a3a00; color: #ffe08a; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: 0.92rem; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }