/* Winfield Mail site. Layout: one centred column (max 1180px), sections stacked,
   hero art = app window sliding out of an envelope. Light and dark follow the system. */

@font-face { font-family: "Gloock"; src: url("fonts/gloock-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --ground: #f3ece0;
  --ink: #2b2030;
  --body: #4d4152;
  --muted: #6f6372;
  --label: #7b5a3c;
  --rule: #cdbb9f;
  --rule-soft: #ddd0bb;
  --card: #fbf8f2;
  --link: #6e2468;
  --link-hover: #4a1d48;
  --button: #6e2468;
  --button-ink: #fbf6ee;
  --outline: #c9b79c;
  --panel: #4a1d48;
  --panel-ink: #f6e9f4;
  --panel-body: #e2cbdf;
  --panel-rule: #6e3a6a;
  --panel-link: #f3d6ef;
  --kraft: #b98d55;
  --kraft-dark: #a77b45;
  --pocket: #fbf4e6;
  --pocket-edge: #c8a674;
  --seal: #6e2468;
  --seal-inner: #5e1d59;
  --seal-ring: #874080;
  --seal-letter: #f3d6ef;

  /* app window mock */
  --win-sidebar: #4a1d48;
  --win-sidebar-ink: #f6e9f4;
  --win-pane: #ffffff;
  --win-list: #f7f6f8;
  --win-ink: #1f1a21;
  --win-muted: #6c6470;
  --win-line: #e4e0e6;
  --win-selected: #efe4ee;
  --win-bar: #f5eef4;
  --win-accent: #7a2b75;
  --win-expiry: #a35a00;
  --win-expiry-bg: #fbe9cf;

  --display: "Gloock", Georgia, "Times New Roman", serif;
  --text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --gutter: clamp(20px, 4vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #1b1418;
    --ink: #f1e8ec;
    --body: #c9bcc4;
    --muted: #a3959d;
    --label: #d2a874;
    --rule: #4d3f47;
    --rule-soft: #43373e;
    --card: #2a2126;
    --link: #e0a6d8;
    --link-hover: #f2cdec;
    --button: #a2479a;
    --button-ink: #fbf6ee;
    --outline: #5a4a52;
    --panel: #34142f;
    --panel-rule: #5a2f56;
    --kraft: #6e5233;
    --kraft-dark: #5c4329;
    --pocket: #e9dcc4;
    --pocket-edge: #c8a674;

    --win-sidebar: #4a1d48;
    --win-pane: #1f1b21;
    --win-list: #262128;
    --win-ink: #efe9f0;
    --win-muted: #a99fac;
    --win-line: #3a333d;
    --win-selected: #3a2a3b;
    --win-bar: #2e2630;
    --win-accent: #a2479a;
    --win-expiry: #f0b86a;
    --win-expiry-bg: #4a3418;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--card); padding: 8px 12px; z-index: 10; }

.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); }

.button {
  display: inline-block;
  background: var(--button);
  color: var(--button-ink);
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
}
.button:hover { color: var(--button-ink); filter: brightness(1.08); }
.button.small { padding: 10px 18px; font-size: 15px; }
.button.outline { background: transparent; color: var(--ink); border: 1.5px solid var(--outline); }
.button.outline:hover { color: var(--ink); border-color: var(--ink); }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 40px; }
.brand span { font-family: var(--display); font-size: 24px; }
.brand:hover { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav a:not(.button) { color: var(--ink); text-decoration: none; }
.nav a:not(.button):hover { text-decoration: underline; }

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding-top: 56px; }
.hero h1 { font-size: clamp(46px, 7vw, 76px); line-height: 1.02; letter-spacing: -0.01em; max-width: 13ch; }
.hero .lede { max-width: 34em; font-size: clamp(17px, 1.6vw, 19px); color: var(--body); }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding-top: 6px; }
.hero .note { font-size: 14px; color: var(--muted); }
.hero .phone-note { display: none; }

/* Envelope art */
.art { position: relative; width: min(980px, 100%); height: 640px; margin: 56px auto 0; overflow: hidden; }
.art .back {
  position: absolute; left: 1%; right: 1%; top: 190px; bottom: 0;
  background: var(--kraft); border-radius: 18px;
  box-shadow: inset 0 40px 0 var(--kraft-dark);
}
.art .letter { position: absolute; left: 50%; top: 24px; transform: translateX(-50%) rotate(-1.5deg); transform-origin: 50% 100%; }
.art .pocket { position: absolute; left: 1%; right: 1%; bottom: 0; height: 280px; filter: drop-shadow(0 -6px 9px rgba(59, 36, 16, 0.35)); }
.art .pocket::before, .art .pocket::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 18px 18px;
}
.art .pocket::before { top: -3px; background: var(--pocket-edge); }
.art .pocket::after { top: 0; background: var(--pocket); }
.art .seal { position: absolute; left: 50%; top: 50%; width: 156px; height: 156px; transform: translate(-50%, -50%); z-index: 1; filter: drop-shadow(0 6px 6px rgba(42, 15, 40, 0.45)); }
.seal .seal-wax { fill: var(--seal); }
.seal .seal-face { fill: var(--seal-inner); stroke: var(--seal-ring); }
.seal .seal-letter { fill: var(--seal-letter); }

/* App window mock */
.window {
  width: 880px; height: 540px; display: flex; overflow: hidden; border-radius: 12px;
  font-family: var(--system); font-size: 12px; line-height: 1.4; text-align: left;
  color: var(--win-ink); background: var(--win-pane);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 24px 60px rgba(30, 10, 30, 0.28);
}
.window .sidebar { width: 176px; flex-shrink: 0; background: var(--win-sidebar); color: var(--win-sidebar-ink); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.window .lights { display: flex; gap: 7px; padding: 0 4px 16px; }
.window .lights span { width: 11px; height: 11px; border-radius: 50%; }
.window .lights span:nth-child(1) { background: #ff5f57; }
.window .lights span:nth-child(2) { background: #febc2e; }
.window .lights span:nth-child(3) { background: #28c840; }
.window .mailbox { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 6px; }
.window .mailbox.current { background: rgba(255, 255, 255, 0.16); font-weight: 600; }
.window .mailbox b { font-weight: 400; opacity: 0.8; }
.window .divider { height: 1px; background: currentColor; opacity: 0.18; margin: 10px 6px; }
.window .group { padding: 4px 8px; font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; }
.window .account { display: flex; align-items: center; gap: 7px; padding: 6px 8px; }
.window .account i { width: 8px; height: 8px; border-radius: 50%; }
.window .account .dot-personal { background: #e0913a; }
.window .account .dot-work { background: #4a8fd8; }
.window .list { width: 300px; flex-shrink: 0; background: var(--win-list); border-right: 1px solid var(--win-line); display: flex; flex-direction: column; }
.window .list-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--win-line); display: flex; justify-content: space-between; align-items: baseline; }
.window .list-head strong { font-size: 13px; }
.window .row { padding: 10px 14px; border-bottom: 1px solid var(--win-line); display: flex; flex-direction: column; gap: 3px; }
.window .row:last-child { border-bottom: none; }
.window .row.selected { background: var(--win-selected); }
.window .row .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.window .row .from { font-weight: 700; }
.window .dim { color: var(--win-muted); }
.window .tag { font-size: 10px; font-weight: 600; border-radius: 9px; padding: 1px 7px; white-space: nowrap; }
.window .tag.new { color: var(--win-accent); border: 1px solid var(--win-accent); }
.window .tag.expiry { color: var(--win-expiry); background: var(--win-expiry-bg); }
.window .reader { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.window .reader-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--win-line); display: flex; flex-direction: column; gap: 4px; }
.window .reader-head strong { font-size: 16px; }
.window .decide { margin: 14px 20px 0; padding: 12px; border-radius: 8px; background: var(--win-bar); display: flex; flex-direction: column; gap: 10px; }
.window .decide div { display: flex; gap: 6px; flex-wrap: wrap; }
.window .decide span { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--win-line); background: var(--win-pane); }
.window .decide span.primary { background: var(--win-accent); border-color: var(--win-accent); color: #ffffff; font-weight: 600; }
.window .message { padding: 16px 20px; line-height: 1.6; display: flex; flex-direction: column; gap: 10px; }

/* Works with */
.works { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; padding-top: 28px; font-size: 15px; color: var(--body); list-style: none; margin: 0; padding-left: 0; }
.works li:first-child { font-weight: 600; color: var(--ink); }

/* Features */
.features { padding-top: 96px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 48px; }
.features > h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; max-width: 16ch; }
.habits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; }
.habit { display: flex; flex-direction: column; gap: 10px; border-top: 1.5px solid var(--rule); padding-top: 20px; }
.habit .title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.habit h3 { font-size: clamp(26px, 2.6vw, 30px); }
.habit p { color: var(--body); }
kbd { font-family: var(--mono); font-size: 13px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }

.also { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.also-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 64px; }
.also-group { display: flex; flex-direction: column; gap: 12px; }
.also-group h3 { font-family: var(--text); font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--rule-soft); padding-bottom: 8px; }
.also-group dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.also-group dt { font-weight: 600; }
.also-group dd { margin: 0; color: var(--body); font-size: 16px; }

/* Privacy panel */
.privacy { padding-top: 56px; padding-bottom: 56px; }
.panel {
  max-width: 1100px; margin: 0 auto; background: var(--panel); color: var(--panel-ink);
  border-radius: 20px; padding: clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
}
.panel h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }
.panel .intro { display: flex; flex-direction: column; gap: 16px; }
.panel p { color: var(--panel-body); }
.panel a { color: var(--panel-link); font-weight: 600; }
.panel .links { display: flex; gap: 20px; flex-wrap: wrap; }
.panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; font-size: 16px; }
.panel li { border-top: 1px solid var(--panel-rule); padding-top: 14px; }

/* Beta, tips, help */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; padding-top: 40px; padding-bottom: 72px; }
.pair section { display: flex; flex-direction: column; gap: 14px; }
.pair h2, .help h2 { font-size: clamp(30px, 3vw, 38px); }
.pair p { color: var(--body); }
.pair .actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-weight: 600; }

.help { display: flex; flex-direction: column; gap: 20px; padding-bottom: 96px; }
.help-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.help-card { background: var(--card); border: 1px solid var(--rule-soft); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.help-card h3 { font-family: var(--text); font-weight: 600; font-size: 17px; }
.help-card p { color: var(--body); font-size: 15px; }

/* Footer */
.footer { border-top: 1.5px solid var(--rule); }
.footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 32px; padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--muted); }
.footer strong { color: var(--ink); font-weight: 600; display: block; }
.footer nav { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.footer a { color: var(--muted); }

/* Document pages (privacy, terms, known issues) */
.doc { max-width: 720px; margin: 0 auto; padding: 40px max(var(--gutter), env(safe-area-inset-right, 0px)) 96px max(var(--gutter), env(safe-area-inset-left, 0px)); }
.doc h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.08; margin-bottom: 24px; }
.doc h2 { font-size: 28px; margin: 48px 0 12px; }
.doc h3 { font-family: var(--text); font-weight: 600; font-size: 18px; margin: 28px 0 8px; }
.doc p, .doc ul, .doc ol { margin: 0 0 16px; color: var(--body); }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); }
.doc code { font-family: var(--mono); font-size: 0.85em; background: var(--card); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc .table { overflow-x: auto; margin-bottom: 16px; }
.doc th, .doc td { text-align: left; border-bottom: 1px solid var(--rule-soft); padding: 8px 10px 8px 0; vertical-align: top; }

/* Tablet: drop the reading pane from the mock */
@media (max-width: 1000px) {
  .window { width: 476px; }
  .window .reader { display: none; }
  .window .list { border-right: none; }
  .art { height: 600px; }
  .art .pocket { height: 250px; }
  .also-groups, .help-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav a:not(.button) { display: none; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 21px; }
  .topbar { padding-top: 14px; padding-bottom: 14px; }
  .hero { align-items: stretch; text-align: left; padding-top: 32px; gap: 16px; }
  .hero h1 { max-width: none; }
  .hero .actions { flex-direction: column; }
  .hero .actions .outline { display: none; }
  .hero .note { text-align: center; }
  .hero .phone-note { display: block; }
  .hero .mac-note { display: none; }
  .art { height: 420px; margin-top: 28px; }
  .art .back { top: 130px; border-radius: 12px; box-shadow: inset 0 26px 0 var(--kraft-dark); left: 0; right: 0; }
  .art .pocket { height: 170px; left: 0; right: 0; }
  .art .pocket::before, .art .pocket::after { clip-path: polygon(0 0, 50% 41%, 100% 0, 100% 100%, 0 100%); border-radius: 0 0 12px 12px; }
  .art .seal { width: 92px; height: 92px; top: 41%; }
  .art .letter { top: 10px; transform: translateX(-50%) rotate(-2deg); }
  .window { width: min(310px, 84vw); height: auto; }
  .window .sidebar { display: none; }
  .window .list { width: 100%; }
  .window .row .preview { display: none; }
  .works { justify-content: flex-start; gap: 6px 16px; font-size: 14px; }
  .works li:first-child { width: 100%; }
  .features { padding-top: 64px; gap: 36px; }
  .habits, .also-groups, .help-cards, .panel, .pair { grid-template-columns: minmax(0, 1fr); }
  .habits { gap: 36px; }
  .privacy { padding-left: 12px; padding-right: 12px; }
  .pair { gap: 40px; padding-bottom: 56px; }
  .pair .actions { flex-direction: column; align-items: stretch; text-align: center; }
  .help { padding-bottom: 56px; }
  .footer .wrap { flex-direction: column-reverse; }
}