/* English homepage, clips layout: hero with the price card, key points, clip
   groups (the small things included), the spec card, and the slim
   community row. Loaded by the English homepage only; the locale homepages are
   built from the previous layout (i18n FROZEN) and keep home.css alone. Built on
   home.css and the .mv-clip card in english-site.css. */

/* Hero: the free label, then the early access badge on its own line, the
   headline and lead, all centred. Below them, on desktop, the product
   clip on the left and the card on the right; on phones the DOM order
   stands: card (the action) first, then the clip. The card has two tiers:
   the free download on top, then a quiet line and the optional Premium
   prices under it. */
.hm-hero { padding:56px 0 88px; }
.hm-hero h1 { font-size:clamp(2.6rem,5vw,4.25rem); margin-bottom:1rem; }
.hm-hero .hm-lead { max-width:42em; margin-bottom:2.4rem !important; }
.hm-hero .hm-free-label { display:flex; justify-content:center; align-items:center; gap:6px; margin:0 0 10px; font-size:.9rem; font-weight:650; letter-spacing:.01em; color:#86efac; }
.hm-free-label svg { flex-shrink:0; }
/* Two lines: the tag and price, then the Early Bird spots (static, or the live count). */
.hm-badge { display:inline-flex; flex-direction:column; align-items:center; gap:5px; margin:0 0 22px; padding:6px 16px 8px; border:1px solid rgba(178,173,255,.3); border-radius:18px; background:rgba(255,255,255,.05); font-size:.86rem; font-weight:550; line-height:1.3; color:var(--mv-muted); }
.hm-badge-line { display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 10px; }
.hm-badge-spots { font-size:.8rem; font-weight:600; color:#c9c6ff; }
.hm-badge-tag { padding:4px 10px; border-radius:999px; background:#4f46df; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.hm-badge [data-mv-price] { color:var(--mv-ink); font-weight:700; }
.hm-badge .hm-badge-was, .hm-badge .hm-badge-was [data-mv-price] { color:var(--mv-muted); font-weight:500; }
.hm-badge-was { text-decoration-thickness:1.5px; }
.hm-badge .hm-badge-off { padding:2px 8px; border-radius:999px; background:rgba(134,239,172,.16); color:#86efac; font-size:.74rem; font-weight:700; }
.hm-hero-row { display:grid; gap:24px; text-align:left; }
@media (min-width:761px) {
  .hm-hero-row { grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:36px; align-items:center; }
  .hm-hero-media { grid-column:1; grid-row:1; }
  .hm-hero-side { grid-column:2; grid-row:1; }
}
/* The hero clip: a 1440x900 montage in a dark card. home-hero.js starts it
   after load on wider screens. The whole clip opens the live demo in a new
   window, and the button in its corner says so. With Save-Data
   the clip is swapped for its poster (.hm-hero-still). */
.hm-hero-clip { padding:10px 10px 4px; border-color:rgba(255,255,255,.12); box-shadow:0 30px 90px -30px rgba(139,92,246,.6); }
.hm-hero-clip .mv-clip-media { position:relative; }
.hm-hero-clip video,.hm-hero-still { aspect-ratio:1440/900; }
.hm-hero-still { display:block; width:100%; height:auto; border-radius:10px; background:#11121b; }
.hm-hero-demo { position:absolute; inset:10px; z-index:1; border-radius:10px; color:inherit; text-decoration:none; }
.hm-hero-demo .mv-demo-launch { left:auto; right:14px; bottom:14px; min-height:40px; padding:8px 14px; transform:none; font-size:.86rem; }
.hm-hero-demo:hover .mv-demo-launch { background:#3e35c8; box-shadow:0 10px 26px rgba(17,18,27,.3); }
.hm-hero-demo:focus-visible { outline:2px solid var(--mv-accent); outline-offset:3px; }
.mv-site .hm-hero-clip figcaption { flex-direction:row; padding:12px 8px 8px; border-top:0; }
.hm-hero-clip .mv-demo-meta { font-size:.84rem; }

.hm-offer { padding:20px 22px; border:1px solid rgba(178,173,255,.26); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),var(--mv-card); }
/* Tier one, the free download: the button (or the phone's form), "Free
   forever" large right under it, what is free in a smaller line, then the
   other platforms as icon links (links, not buttons: the card keeps one). */
.hm-offer .hm-hero-actions { margin:0; }
.hm-offer .hm-hero-actions > .mv-button { flex:1 1 100%; }
.hm-offer .hm-send-link { max-width:none; }
.hm-offer .hm-send-hint,.hm-offer .hm-mobile-soon { margin:8px 0 0; }
.hm-offer .hm-offer-free-title { margin:16px 0 0; font-size:1.3rem; font-weight:700; line-height:1.2; letter-spacing:-.015em; color:#86efac; }
.hm-offer .hm-offer-free-line { margin:4px 0 0; font-size:.92rem; line-height:1.5; color:var(--mv-muted); text-wrap:pretty; }
.hm-offer .hm-hero-links { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:12px 0 0; font-size:.86rem; }
.hm-hero .hm-apps-soon { margin:2px 0 0; color:var(--mv-muted); }
@media (max-width:760px) { .hm-hero .hm-apps-soon { display:none; } }
.hm-os-links { list-style:none; display:flex; flex-wrap:wrap; gap:0 16px; margin:0; padding:0; }
.hm-os-links a { display:inline-flex; align-items:center; gap:6px; min-height:32px; color:#c9c6ff; font-weight:550; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color .15s cubic-bezier(.16,1,.3,1); }
.hm-os-links a:hover { text-decoration-color:currentColor; }
.hm-os-links a:focus-visible { outline:2px solid var(--mv-accent); outline-offset:2px; border-radius:4px; }
.hm-os-links svg { flex-shrink:0; width:16px; height:16px; fill:currentColor; }
.hm-hero .hm-hero-links .hm-send-open { margin:0; }
/* Tier two, Premium: optional, so smaller and quieter, under a hairline. */
.hm-offer-premium { margin-top:18px; padding-top:16px; border-top:1px solid var(--mv-line); }
.hm-offer-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 12px; margin-bottom:6px; }
.hm-offer-title { margin:0; font-size:.86rem; font-weight:650; color:var(--mv-ink); }
.hm-offer-title span { font-weight:500; color:var(--mv-muted); }
.hm-offer-more { font-size:.84rem; }
/* The two rows share their columns (subgrid), so a longer amount such as £3.50/month never meets the struck price. */
.hm-offer-plans { display:grid; grid-template-columns:auto auto minmax(0,1fr); column-gap:14px; margin:0; font-size:.9rem; }
.hm-offer-plan { display:grid; grid-column:1 / -1; grid-template-columns:4.8em 7.6em minmax(0,1fr); grid-template-columns:subgrid; align-items:baseline; padding:3px 0; }
.hm-offer-plan dt { color:var(--mv-muted); }
.hm-offer-plan dd { margin:0; }
.hm-offer-price { color:var(--mv-muted); white-space:nowrap; }
.hm-offer-price [data-mv-price] { font-size:1.12rem; font-weight:700; letter-spacing:-.01em; color:var(--mv-ink); }
.hm-offer-deal { white-space:nowrap; }
/* The standard price after early access, struck, here and in the closing price line. */
.hm-offer-was, .hm-offer-was [data-mv-price], .hm-price .hm-offer-was [data-mv-price] { font-weight:500; color:var(--mv-muted); }
.hm-offer-was { text-decoration-thickness:1.5px; }
.hm-offer-off { display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; background:rgba(134,239,172,.14); color:#86efac; font-size:.75rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.hm-offer-terms { margin:8px 0 0; font-size:.8rem; line-height:1.5; color:var(--mv-muted); }
.hm-hero-proof { text-align:center; }

/* Key points: icon, bold word, one line. */
.hm-keys { padding:44px 0; border-bottom:1px solid var(--mv-line); background:var(--mv-bg); }
.hm-keys-list { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin:0; padding:0; }
.hm-keys-list li { display:grid; grid-template-columns:auto 1fr; align-content:start; gap:2px 14px; }
.hm-key-icon,.hm-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--hue); background:color-mix(in oklab,var(--hue) 15%,var(--mv-card)); }
.hm-key-icon { grid-row:span 2; }
.hm-keys-list strong { font-size:1.02rem; font-weight:650; letter-spacing:-.01em; }
.hm-keys-list li > span:last-child { font-size:.9rem; line-height:1.5; color:var(--mv-muted); }

/* Clip groups: the two-line heading and lead centred, then the clips in plain
   rows that flow down the page. Two columns at most, so a clip is never shrunk
   past legibility (three columns drew the app text at about 317 px wide), one
   on phones. An odd last card spans the row and lays its clip beside its
   caption, so a row never ends in a hole. Nothing in a group scrolls: no
   sideways row, no overflow, no inner scrollbar. */
.hm-clip-group .hm-center { margin-bottom:40px; }
.hm-clip-group .hm-center .hm-body { margin-bottom:0; }
.hm-clip-group .hm-body a { color:var(--mv-ink); text-decoration:underline; text-decoration-color:color-mix(in oklab,var(--hue) 55%,transparent); text-underline-offset:3px; }
.hm-group-link { margin:16px 0 0; }
.hm-clip-group .mv-clip-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.hm-clip-group .mv-clip-grid > :last-child:nth-child(odd) { grid-column:1 / -1; }
@media (min-width:761px) {
  .hm-clip-group .mv-clip-grid > :last-child:nth-child(odd) { flex-direction:row; align-items:center; gap:12px; padding:12px; }
  .hm-clip-group .mv-clip-grid > :last-child:nth-child(odd) .mv-clip-media { flex:0 0 calc(50% - 18px); }
  .hm-clip-group .mv-clip-grid > :last-child:nth-child(odd) figcaption { padding:12px 28px; justify-content:center; font-size:1rem; }
  .hm-clip-group .mv-clip-grid > :last-child:nth-child(odd) .mv-clip-title { font-size:1.4rem; }
  .hm-clip-group .mv-clip-grid > :last-child:nth-child(odd) .mv-text-link { margin-top:6px; }
}
/* The poster is a lazy <img>; the video lies over it, transparent until
   home-clips.js marks the card live on its first played frame. Not
   display:none, so the player still sees it on screen. */
.hm-clip-group .mv-clip-media { position:relative; }
.mv-clip-poster { display:block; width:100%; height:auto; aspect-ratio:960 / 660; border-radius:10px; background:color-mix(in oklab,var(--clip-hue,#8b5cf6) 24%,var(--mv-surface)); }
.hm-clip-group .mv-clip video { position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); background:transparent; opacity:0; transition:opacity .3s cubic-bezier(.16,1,.3,1); }
.hm-clip-group .mv-clip.is-live video { opacity:1; }

/* Small things: the features with no clip, one quiet row of links. */
.hm-more-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 28px; margin-top:28px; padding-top:22px; border-top:1px solid color-mix(in oklab,var(--hue) 22%,var(--mv-line)); }
.hm-more-links { list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; margin:0; padding:0; }
.hm-more-links a { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--mv-ink); text-decoration:underline; text-decoration-color:color-mix(in oklab,var(--hue) 45%,transparent); text-underline-offset:4px; }
.hm-more-links a:hover { text-decoration-color:currentColor; }

/* Spec cards: always dark, like the hero. "Built in Rust" comes first and
   mirrors the spec card on wider screens (its list on the left), so the two
   read as a pair rather than one card twice. */
.hm-spec-band { padding-block:24px 96px; }
.hm-spec-band.hm-native-band { padding-bottom:0; }
.hm-spec { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:48px; padding:48px; border:1px solid #2b2d45; border-radius:24px; background:radial-gradient(70% 90% at 0% 0%,rgba(99,102,241,.3),transparent 70%),linear-gradient(160deg,#0d0d1c,#16132e); }
.hm-spec h2 { margin-bottom:1rem; }
.hm-spec .mv-eyebrow { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; color:#c9c6ff; }
.hm-spec-copy > p:not(.mv-eyebrow) { max-width:52ch; color:var(--mv-muted); font-size:1.02rem; }
.hm-spec-list { display:grid; margin:0; border:1px solid var(--mv-line); border-radius:14px; background:rgba(255,255,255,.03); }
.hm-spec-list > div { display:grid; grid-template-columns:8.5em 1fr; gap:16px; padding:14px 18px; border-top:1px solid var(--mv-line); }
.hm-spec-list > div:first-child { border-top:0; }
.hm-spec-list dt { padding-top:2px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mv-muted); }
.hm-spec-list dd { margin:0; font-weight:600; color:var(--mv-ink); }

/* Community: one line, the newsletter beside it. */
.hm-community-line { padding:28px 0; border-block:1px solid var(--mv-line); background:color-mix(in oklab,#8b5cf6 7%,var(--mv-bg)); }
.hm-community-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,400px); align-items:center; gap:20px 40px; }
.hm-community-ask { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.hm-community-line h2 { margin:0; font-size:1.05rem; letter-spacing:-.01em; }
.hm-community-line .mv-community-actions { margin:0; }
.hm-community-line .mv-community-status { flex-basis:100%; margin:0; }
.hm-newsletter-inline label { font-size:.82rem; font-weight:550; color:var(--mv-muted); }
.hm-newsletter-inline [data-form-status] { margin:6px 0 0; font-size:.82rem; }
.hm-newsletter-inline [data-form-status]:empty { display:none; }

@media (min-width:761px) and (max-width:1000px) {
  .hm-hero-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
}
@media (max-width:1000px) {
  .hm-keys-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:901px) {
  .hm-spec-flip { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); background:radial-gradient(70% 90% at 100% 0%,rgba(99,102,241,.3),transparent 70%),linear-gradient(200deg,#0d0d1c,#16132e); }
  .hm-spec-flip .hm-spec-list { grid-column:1; grid-row:1; }
  .hm-spec-flip .hm-spec-copy { grid-column:2; grid-row:1; }
}
@media (max-width:900px) {
  .hm-spec { grid-template-columns:1fr; gap:28px; padding:32px; }
  .hm-community-row { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .hm-hero { padding:28px 0 48px; }
  .hm-hero h1 { font-size:clamp(2.3rem,10.5vw,3.2rem); margin-bottom:.8rem; }
  .hm-hero .hm-lead { font-size:.96rem; line-height:1.55; margin-bottom:1.3rem !important; }
  .hm-hero .hm-free-label { margin-bottom:8px; font-size:.8rem; }
  .hm-badge { gap:4px; margin-bottom:14px; padding:5px 12px 7px; font-size:.74rem; }
  .hm-badge-line { gap:8px; }
  .hm-badge-spots { font-size:.72rem; }
  .hm-badge-tag { padding:3px 8px; font-size:.62rem; }
  .hm-hero-demo .mv-demo-launch { right:10px; bottom:10px; min-height:34px; padding:6px 12px; font-size:.8rem; }
  .hm-offer { padding:16px; }
  .hm-clip-group .mv-clip-grid { grid-template-columns:1fr; }
  .hm-clip-group .hm-center { margin-bottom:28px; }
  .hm-keys { padding:32px 0; }
  .hm-spec-band { padding-bottom:64px; }
}
@media (max-width:560px) {
  .hm-keys-list { grid-template-columns:1fr; }
  .hm-keys-list { gap:20px; }
  .hm-spec { padding:24px 20px; border-radius:18px; }
  .hm-spec-list > div { grid-template-columns:1fr; gap:2px; }
}
@media (prefers-reduced-motion:reduce) { .hm-clip-group .mv-clip video { transition:none; } .hm-os-links a { transition:none; } }