/* MailComb marketing site - static HTML, no build step, deployed as plain files.
   Design tokens copied verbatim from the app's own design system
   (InboxAI/src/InboxAI.Web/wwwroot/brand/*.css) so the site and the app read as the same
   product. Fonts self-hosted for the same reason the app does it: no runtime CDN dependency. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../brand/fonts/archivo-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../brand/fonts/public-sans-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../brand/fonts/public-sans-italic-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../brand/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  /* Base ramp - Postal Red */
  --red-50: #FFF1F2; --red-100: #FFDDE1; --red-500: #C8102E; --red-600: #A50D26; --red-700: #7E0A1D;
  /* Base ramp - Ink Blue */
  --blue-50: #F2F6FD; --blue-100: #E1EBFA; --blue-200: #BCD1F2; --blue-500: #1F5FBF;
  --blue-600: #174893; --blue-700: #14284B; --blue-800: #0C1830;
  /* Base ramp - Paper */
  --paper-0: #FFFFFF; --paper-50: #FBFAF7; --paper-100: #F4F2EC; --paper-200: #E8E5DC;
  --paper-300: #D5D1C5; --paper-400: #A8A49A; --paper-500: #77746C; --paper-700: #2A2926;
  --signal-ok: #1B7A4B; --signal-ok-bg: #E7F4ED;

  --surface-page: var(--paper-50);
  --surface-card: var(--paper-0);
  --surface-inverse: var(--blue-700);
  --text-heading: var(--blue-700);
  --text-body: var(--paper-700);
  --text-muted: var(--paper-500);
  --text-inverse: var(--paper-50);
  --text-inverse-muted: rgba(251, 250, 247, .68);
  --border-hairline: var(--paper-200);
  --border-strong: var(--paper-300);
  --action-primary: var(--blue-700);
  --action-primary-hover: var(--blue-800);
  --accent: var(--red-500);
  --accent-soft: var(--red-50);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text-heading);
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.022em; }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 19px; }

p { margin: 0 0 1em; }
a { color: var(--blue-500); }
img, svg { max-width: 100%; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--sunken { background: var(--paper-100); }
.section--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.section--inverse h1, .section--inverse h2, .section--inverse h3 { color: var(--text-inverse); }
.section--inverse p { color: var(--text-inverse-muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.lede {
  font-size: 19px;
  color: var(--text-muted);
  max-width: 640px;
}

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 247, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header nav a:not(.btn) {
  color: var(--text-body);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}

.site-header nav a:not(.btn):hover { color: var(--text-heading); }

.logo-link { display: flex; align-items: center; }
.logo-link img { height: 26px; width: auto; display: block; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary { background: var(--action-primary); color: var(--paper-0); }
.btn--primary:hover { background: var(--action-primary-hover); }
.btn--ghost { border-color: var(--border-strong); color: var(--text-heading); }
.btn--ghost:hover { border-color: var(--text-heading); }
.btn--on-inverse { background: var(--paper-0); color: var(--text-heading); }
.btn--on-inverse:hover { background: var(--paper-100); }
.btn--sm { padding: 9px 16px; font-size: 13.5px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }

/* Hero */
.hero { padding: 96px 0 72px; }
.hero .container { max-width: 760px; text-align: left; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--text-muted); font-family: var(--font-mono); }

/* App-window screenshot frame */
.shot-frame {
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: 0 30px 70px -30px rgba(12, 24, 48, .28);
}

.shot-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--paper-100);
  border-bottom: 1px solid var(--border-hairline);
}

.shot-frame__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper-300);
  display: inline-block;
}

.shot-frame img { display: block; width: 100%; height: auto; }

.hero-shot { margin-top: 56px; max-width: 980px; }

.tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.tour-item p { margin: 14px 2px 0; font-size: 14px; color: var(--text-muted); }
.tour-item h3 { margin: 0 2px; font-size: 15.5px; }

@media (max-width: 760px) {
  .tour-grid { grid-template-columns: 1fr; }
}

/* Mechanism / trust cards */
.mechanism-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.mechanism-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 24px;
}

.mechanism-card .glyph {
  width: 36px;
  height: 36px;
  color: var(--accent);
  margin-bottom: 14px;
}

.mechanism-card h3 { margin-bottom: 8px; font-size: 17px; }
.mechanism-card p { color: var(--text-muted); font-size: 14.5px; margin: 0; }

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 32px;
  margin-top: 36px;
}

.feature-row {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.feature-row .glyph { width: 22px; height: 22px; color: var(--text-heading); flex-shrink: 0; margin-top: 2px; }
.feature-row h3 { font-size: 15.5px; margin-bottom: 4px; }
.feature-row p { font-size: 14px; color: var(--text-muted); margin: 0; }
.feature-row .badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  background: var(--blue-50);
  color: var(--blue-600);
}
.feature-row .badge--full { background: var(--accent-soft); color: var(--accent); }

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}

.price-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.price-card--featured {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 1px var(--blue-700);
  position: relative;
}

.price-card__tag {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--accent);
  color: var(--paper-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.price-card h3 { font-size: 17px; margin-bottom: 4px; }
.price-card .price-card__desc { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }

.price-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-now .amount { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--text-heading); letter-spacing: -0.02em; }
.price-was { text-decoration: line-through; color: var(--text-muted); font-size: 16px; }
.price-alt-currency { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
.price-intro-note { font-size: 12.5px; color: var(--accent); font-family: var(--font-mono); margin-top: 6px; letter-spacing: .01em; }

.currency-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.price-list { list-style: none; margin: 24px 0 28px; padding: 0; flex-grow: 1; }
.price-list li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--text-body);
}
.price-list li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--signal-ok); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-hairline);
  padding: 48px 0;
  background: var(--paper-100);
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand { max-width: 340px; }
.footer-brand img { height: 22px; margin-bottom: 12px; }
.footer-legal { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

.footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.footer-links h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--text-body); text-decoration: none; font-size: 14.5px; }
.footer-links a:hover { color: var(--blue-500); }

/* Policy page */
.policy {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.policy h1 { margin-bottom: 8px; }
.policy .updated { color: var(--text-muted); font-size: 13.5px; font-family: var(--font-mono); margin-bottom: 40px; }
.policy h2 { font-size: 21px; margin-top: 40px; }
.policy h3 { font-size: 16px; margin-top: 24px; }
.policy p, .policy li { color: var(--text-body); font-size: 15.5px; }
.policy ul { padding-left: 22px; }
.policy li { margin-bottom: 6px; }
.policy a { color: var(--blue-500); }
.policy .callout {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 14.5px;
}

@media (max-width: 640px) {
  .site-header nav { gap: 16px; }
  .site-header nav a:not(.btn) { display: none; }
  .section { padding: 64px 0; }
}