/* Homepage: benefit-led layout. Each section carries --hue (top) and --hue2 (bottom);
   the next section starts on the previous --hue2, so the colour flows down the page. */
.hm { --hue:#2f8cf0; --hue2:#a855f7; }
.hm-grad { background:linear-gradient(90deg in oklch,var(--hue),var(--hue2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hm .hm-center { text-align:center; max-width:760px; margin-inline:auto; }
.hm-body { font-size:1.08rem; color:var(--mv-muted); max-width:62ch; }
.hm-center .hm-body { margin-inline:auto; }
.hm .mv-eyebrow { color:var(--hue); font-weight:650; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }

/* Always-dark bands (hero, free promise, final call). */
.hm-dark { --mv-bg:#0b0b16; --mv-surface:#171828; --mv-card:#1c1d2e; --mv-ink:#f3f3f8; --mv-muted:#b4b8ca; --mv-line:#34374a; --mv-accent:#b2adff; --mv-tint:#2a2745; color:var(--mv-ink); background:var(--mv-bg); }
.hm-dark .mv-text-link { color:#c9c6ff; }

.hm-hero { background:radial-gradient(60% 55% at 50% 100%,rgba(99,102,241,.38),transparent 70%),radial-gradient(40% 40% at 85% 20%,rgba(168,85,247,.18),transparent 70%),linear-gradient(180deg,#05050a,#13122c); padding:96px 0 0; overflow:hidden; }
.hm-hero-inner { text-align:center; }
.hm-hero h1 { font-size:clamp(2.8rem,6.4vw,5.4rem); letter-spacing:-.045em; margin-bottom:1.2rem; }
.hm-lead { font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--mv-muted); max-width:36em; margin:0 auto 2rem !important; }
.hm-hero-actions { justify-content:center; }
.hm-hero .mv-small { margin:1rem 0 .4rem; color:var(--mv-muted); }
.hm-hero-shot { margin-top:56px; max-width:1100px; }
.hm-hero-shot .mv-demo-card { display:block; }
.hm-hero-shot .mv-demo-shot { display:block; border-radius:14px 14px 0 0; overflow:hidden; box-shadow:0 -10px 90px -20px rgba(139,92,246,.55); border:1px solid rgba(255,255,255,.12); border-bottom:0; }
.hm-hero-shot .mv-demo-caption { display:none; }

/* Benefit pillars */
.hm-pillar { --tint:9%; padding:112px 0; /* oklab: Chrome draws "in oklch" gradients of color-mix() stops upside down. */ background:linear-gradient(180deg in oklab,color-mix(in oklab,var(--hue) var(--tint),var(--mv-bg)),color-mix(in oklab,var(--hue2) var(--tint),var(--mv-bg))); }
.dark .hm-pillar { --tint:15%; }
.hm-pillar-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:center; }
.hm-flip .hm-pillar-grid > figure { order:-1; }
.hm-benefits { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:10px; }
.hm-benefits a { display:block; padding:14px 18px; border-left:3px solid var(--hue); border-radius:0 10px 10px 0; background:color-mix(in oklab,var(--mv-card) 70%,transparent); text-decoration:none; transition:background .16s ease,transform .16s ease; }
.hm-benefits a:hover { background:var(--mv-card); transform:translateX(3px); }
.hm-benefits strong { display:flex; align-items:center; gap:8px; font-weight:620; }
.hm-benefits strong::after { content:'→'; margin-left:auto; color:var(--hue); opacity:0; transition:opacity .16s ease; }
.hm-benefits a:hover strong::after { opacity:1; }
.hm-benefits span { display:block; color:var(--mv-muted); font-size:.93rem; margin-top:2px; }
.hm-chip { font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:99px; color:var(--hue,#8b5cf6); background:color-mix(in oklab,var(--hue,#8b5cf6) 16%,transparent); }
.hm-shot .mv-shot { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.hm-shot img { display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--mv-line); box-shadow:0 34px 80px -34px color-mix(in oklab,var(--hue) 70%,transparent); }

/* Free promise */
.hm-free { --hue:#60a5fa; --hue2:#c084fc; padding:104px 0; background:radial-gradient(45% 60% at 50% 45%,rgba(96,165,250,.16),transparent 70%),linear-gradient(180deg,#0b0b16,#16132e); }
.hm-free-list { list-style:none; padding:0; margin:44px auto 36px; max-width:900px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hm-free-list li { padding:16px 18px 16px 46px; border:1px solid var(--mv-line); border-radius:12px; background:rgba(255,255,255,.03); position:relative; font-weight:560; }
.hm-free-list li::before { content:'✓'; position:absolute; left:18px; font-weight:800; color:#86efac; }

/* More */
.hm-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:44px 0 28px; }
.hm-cards a { --hue:#8b5cf6; display:block; padding:22px; border:1px solid var(--mv-line); border-radius:14px; background:var(--mv-card); text-decoration:none; transition:transform .16s ease,border-color .16s ease; }
.hm-cards a:hover { transform:translateY(-2px); border-color:var(--mv-accent); }
.hm-cards strong { display:flex; gap:8px; align-items:center; font-size:1.05rem; margin-bottom:6px; }
.hm-cards span { color:var(--mv-muted); font-size:.93rem; }

/* Comparison: one hue per group (--g on each tbody). Cards below 900px, never a sideways scroll. */
.hm-compare { --hue:#2f8cf0; --hue2:#10b981; background:linear-gradient(180deg,var(--mv-bg),color-mix(in oklab,#2f8cf0 6%,var(--mv-bg))); }
.hm-table-wrap { margin-top:36px; border:1px solid var(--mv-line); border-radius:14px; background:var(--mv-card); overflow:hidden; }
.hm-table { border-collapse:collapse; width:100%; font-size:.85rem; line-height:1.4; }
.hm-table th,.hm-table td { padding:8px 12px; text-align:left; vertical-align:top; border-bottom:1px solid color-mix(in oklab,var(--mv-line) 60%,transparent); }
.hm-table thead th { font-size:.84rem; background:var(--mv-surface); vertical-align:middle; padding-block:12px; border-bottom:1px solid var(--mv-line); }
.hm-table thead small { display:block; font-weight:450; color:var(--mv-muted); font-size:.72rem; }
.hm-table thead small a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.hm-table thead small a:hover { color:var(--mv-accent); }
.hm-app { display:flex; align-items:center; gap:8px; }
.hm-app img { flex:none; width:22px; height:22px; object-fit:contain; border-radius:5px; }
.hm-table tbody th { font-weight:560; width:21%; border-left:3px solid var(--g); }
.hm-table tbody th a { text-decoration:underline; text-decoration-color:color-mix(in oklab,var(--g) 45%,transparent); text-underline-offset:3px; }
.hm-table tbody th a:hover { color:var(--g); }
.hm-table tbody tr:nth-child(odd):not(.hm-group) { background:color-mix(in oklab,var(--g) 3%,transparent); }
.hm-table .hm-group th { border-left:3px solid var(--g); padding:9px 12px; font-size:.7rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:color-mix(in oklab,var(--g) 80%,var(--mv-ink)); background:color-mix(in oklab,var(--g) 13%,var(--mv-card)); }
.hm-table .hm-us { background-color:color-mix(in oklab,var(--mv-accent) 10%,var(--mv-card)); font-weight:600; }
.hm-table thead .hm-us { color:var(--mv-accent); }
.hm-table td.n:not(.hm-us) { color:var(--mv-muted); }
.hm-table td.y,.hm-table td.p,.hm-table td.n { position:relative; padding-left:30px; }
.hm-table td.y::before,.hm-table td.p::before,.hm-table td.n::before { position:absolute; left:12px; font-weight:800; }
.hm-table td.y::before { content:'✓'; color:#16a34a; }
.hm-table td.p::before { content:'~'; color:#d97706; }
.hm-table td.n::before { content:'✕'; color:#dc2626; }
.hm-sources { margin-top:14px; font-size:.82rem; color:var(--mv-muted); }
.hm-sources summary { cursor:pointer; }
.hm-sources ul { margin:.6rem 0 0; padding-left:1.2rem; }
@media (max-width:900px) {
  .hm-table-wrap { border:0; background:none; overflow:visible; }
  .hm-table,.hm-table tbody { display:block; }
  .hm-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .hm-table tbody { margin-bottom:22px; }
  .hm-table tr { display:grid; grid-template-columns:1fr 1fr; margin-bottom:8px; border:1px solid var(--mv-line); border-left:3px solid var(--g); border-radius:10px; overflow:hidden; background:var(--mv-card); }
  .hm-table tbody tr:nth-child(odd):not(.hm-group) { background:var(--mv-card); }
  .hm-table tr.hm-group { display:block; border:0; background:none; margin-bottom:8px; }
  .hm-table .hm-group th { display:block; border-left:0; border-radius:8px; }
  .hm-table tbody th { grid-column:1/-1; width:auto; border-left:0; padding:10px 12px 6px; font-size:.92rem; }
  .hm-table td { border-bottom:0; padding:6px 10px 6px 36px; background:no-repeat 10px 7px / 18px 18px; font-size:.82rem; }
  .hm-table td.y,.hm-table td.p,.hm-table td.n { padding-left:52px; }
  .hm-table td.y::before,.hm-table td.p::before,.hm-table td.n::before { left:34px; }
  .hm-table td:nth-of-type(1) { grid-column:1/-1; background-image:url(/icon-128.webp); padding-block:7px; }
  .hm-table td:nth-of-type(2) { background-image:url(/assets/compare/thunderbird.svg); }
  .hm-table td:nth-of-type(3) { background-image:url(/assets/compare/apple-mail.svg); }
  .hm-table td:nth-of-type(4) { background-image:url(/assets/compare/outlook.svg); }
  .hm-table td:nth-of-type(5) { background-image:url(/assets/compare/notion.svg); }
  .hm-table tr > td:last-child { padding-bottom:10px; }
  .hm-table tr > td:nth-of-type(4) { padding-bottom:10px; }
}

/* Community + newsletter */
.hm-community { --hue:#8b5cf6; --hue2:#ec4899; padding:96px 0; background:linear-gradient(135deg,color-mix(in oklab,#8b5cf6 12%,var(--mv-bg)),color-mix(in oklab,#ec4899 10%,var(--mv-bg))); }
.hm-community-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.hm-community .mv-community-actions { justify-content:flex-start; margin-top:24px; }
.hm-newsletter { padding:28px; border-radius:16px; background:var(--mv-card); border:1px solid var(--mv-line); }
.hm-newsletter label { font-size:.85rem; font-weight:600; }

.hm-final { --hue:#60a5fa; --hue2:#c084fc; padding:110px 0; background:radial-gradient(60% 80% at 50% 110%,rgba(139,92,246,.4),transparent 70%),#07070f; }
.hm-final .mv-small { margin-top:1rem; }


/* Seams: the site's notch line, filled with the dark band's colour so the band reaches the line. */
.hm-free,.hm-final { position:relative; z-index:1; }
.hm-free::before,.hm-free::after,.hm-final::before { content:''; position:absolute; left:0; width:100%; height:20px; pointer-events:none; background:no-repeat center / 100% 100%; }
.hm-free::before { top:-19px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath d='M0 22H240L254 8H348L362 22H438L460 0H580L602 22H690L704 8H798L812 22H886L908 0H1028L1050 22H1126L1140 8H1234L1248 22H1440V24H0Z' fill='%230b0b16'/%3E%3Cpath d='M0 22H240L254 8H348L362 22H438L460 0H580L602 22H690L704 8H798L812 22H886L908 0H1028L1050 22H1126L1140 8H1234L1248 22H1440' fill='none' stroke='%23b2adff' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.hm-free::after { bottom:-19px; transform:scaleY(-1); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath d='M0 22H240L254 8H348L362 22H438L460 0H580L602 22H690L704 8H798L812 22H886L908 0H1028L1050 22H1126L1140 8H1234L1248 22H1440V24H0Z' fill='%2316132e'/%3E%3Cpath d='M0 22H240L254 8H348L362 22H438L460 0H580L602 22H690L704 8H798L812 22H886L908 0H1028L1050 22H1126L1140 8H1234L1248 22H1440' fill='none' stroke='%23b2adff' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.hm-final::before { top:-19px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath d='M0 22H240L254 8H348L362 22H438L460 0H580L602 22H690L704 8H798L812 22H886L908 0H1028L1050 22H1126L1140 8H1234L1248 22H1440V24H0Z' fill='%2307070f'/%3E%3Cpath d='M0 22H240L254 8H348L362 22H438L460 0H580L602 22H690L704 8H798L812 22H886L908 0H1028L1050 22H1126L1140 8H1234L1248 22H1440' fill='none' stroke='%23b2adff' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }

@media (max-width:900px) {
  .hm-pillar { padding:72px 0; }
  .hm-pillar-grid,.hm-community-grid { grid-template-columns:1fr; gap:36px; }
  .hm-flip .hm-pillar-grid > figure { order:0; }
  .hm-free-list,.hm-cards { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .hm-hero { padding-top:64px; }
  .hm-free-list,.hm-cards { grid-template-columns:1fr; }
  .mv-wrap { padding-inline:16px; }
}
@media (prefers-reduced-motion:reduce) { .hm-benefits a,.hm-cards a { transition:none; } }
.hm-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hm-platforms { display:flex; justify-content:center; gap:20px; margin:0 0 20px; color:var(--mv-muted); }
.hm-platforms svg { width:22px; height:22px; fill:currentColor; }
.hm-final .mv-actions { justify-content:center; }
.mv-feedback-quotes img.mv-person-mark { object-fit:cover; background:none; }
/* Feedback: compact cards in four hand-balanced columns (CSS columns balance differently per browser). */
.hm .mv-feedback-quotes { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:start; margin-top:32px; }
.hm-qcol { display:grid; gap:16px; }
@media (max-width:1000px) { .hm .mv-feedback-quotes { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .hm .mv-feedback-quotes { grid-template-columns:1fr; } }
.hm .mv-feedback-quotes figure,.hm .mv-feedback-quotes figure+figure { margin:0; padding:18px; border:1px solid var(--mv-line); border-radius:12px; }
.hm .mv-feedback-quotes blockquote { margin:0 0 14px; font-size:.95rem; line-height:1.5; }
.hm .mv-feedback-quotes blockquote p { margin:0; }
.hm .mv-feedback-quotes figcaption { grid-template-columns:28px 1fr; gap:0 10px; padding-top:12px; font-size:.74rem; line-height:1.45; }
.hm .mv-feedback-quotes .mv-person-mark { width:28px; height:28px; font-size:.85rem; }
.hm .mv-feedback-quotes figcaption strong { font-size:.88rem; }
.hm .mv-feedback-quotes figcaption a { font-size:.74rem; }
.hm .hm-after-list { margin:20px 0 0; }
.hm-table td a { color:inherit; text-decoration:underline; text-decoration-color:color-mix(in oklab,currentColor 35%,transparent); text-underline-offset:2px; }
.hm-stats { list-style:none; padding:0; margin:28px auto 0; max-width:900px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hm-stats a { display:block; height:100%; padding:16px 18px; border-radius:12px; background:color-mix(in oklab,var(--mv-accent) 8%,var(--mv-card)); border:1px solid var(--mv-line); text-decoration:none; text-align:center; }
.hm-stats a:hover { border-color:var(--mv-accent); }
.hm-stats strong { display:block; font-size:1.6rem; letter-spacing:-.03em; line-height:1.2; }
.hm-stats span { display:block; margin-top:4px; font-size:.8rem; color:var(--mv-muted); line-height:1.4; }
@media (max-width:760px) { .hm-stats { grid-template-columns:1fr; } }
/* Feature pages (features/*.html): hero, close-up, how it works, video slot, context shot. */
.fp-hero { padding:56px 0 24px; background:linear-gradient(180deg in oklab,color-mix(in oklab,var(--hue) 9%,var(--mv-bg)),var(--mv-bg)); }
.fp-hero h1 { font-size:clamp(2.2rem,4.6vw,3.6rem); margin-bottom:1rem; }
.fp-crumbs { display:flex; gap:8px; font-size:.82rem; color:var(--mv-muted); margin-bottom:24px; }
.fp-crumbs a { color:inherit; }
.hm .fp-lead { font-size:1.12rem; margin-bottom:24px; }
.fp-closeup { margin-top:40px; }
.fp-closeup .mv-shot,.fp-full .mv-shot { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.fp-closeup img { display:block; max-width:100%; height:auto; margin-inline:auto; border-radius:14px; border:1px solid var(--mv-line); box-shadow:0 34px 80px -34px color-mix(in oklab,var(--hue) 70%,transparent); }
.fp-full img { display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--mv-line); }
.fp-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.fp-grid > div:only-child,.fp-grid > div:has(+ .fp-video[hidden]) { grid-column:1 / -1; max-width:760px; }
.fp-how { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.fp-how li { padding:14px 18px; border-left:3px solid var(--hue); border-radius:0 10px 10px 0; background:var(--mv-card); }
.fp-how strong { display:block; }
.fp-how span { color:var(--mv-muted); font-size:.95rem; }
.hm .fp-plan { margin:24px 0 0; padding:14px 18px; border-radius:10px; border:1px solid var(--mv-line); }
.fp-premium { background:color-mix(in oklab,#8b5cf6 7%,var(--mv-card)); }
.fp-free { background:color-mix(in oklab,#16a34a 7%,var(--mv-card)); }
.hm .fp-where { margin:16px 0 0; font-size:.9rem; }
.fp-where span { display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mv-muted); }
.fp-video { border-radius:14px; }
.fp-video h2 { font-size:1.4rem; margin-bottom:.4rem; }
.fp-play { display:grid; place-items:center; width:100%; aspect-ratio:16/9; margin-top:12px; border:1px solid var(--mv-line); border-radius:14px; background:radial-gradient(circle,color-mix(in oklab,var(--hue) 22%,var(--mv-card)),var(--mv-card)); font-weight:650; cursor:pointer; }
.fp-play::before { content:''; width:0; height:0; margin-bottom:10px; border-style:solid; border-width:18px 0 18px 30px; border-color:transparent transparent transparent var(--hue); }
.fp-video iframe { display:block; width:100%; aspect-ratio:16/9; margin-top:12px; border:0; border-radius:14px; }
.fp-related { grid-template-columns:repeat(3,1fr); }
@media (max-width:900px) { .fp-grid,.fp-related { grid-template-columns:1fr; } }
.fp-closeup img { width:auto; }
.hm-closeup img { width:auto; max-width:100%; margin-inline:auto; }