/* Marvelous UI — page blocks layout (shipped with every playground export).
   Layout only: every visual effect comes from the components. Override freely. */
@layer mv.reset, mv.tokens, mv.base, mv.components, mv.utilities, mvb;

@layer mvb {
  .mvb-page { margin: 0; background: var(--mv-bg); color: var(--mv-fg); font: 400 1rem/1.6 var(--mv-font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  .mvb-wrap { width: min(100% - 2 * clamp(1rem, 4vw, 2rem), 72rem); margin-inline: auto; }
  .mvb-section { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); isolation: isolate; overflow: hidden; }
  .mvb-section.mvb-tight { padding-block: clamp(2rem, 4vw, 3rem); }
  .mvb-bg { z-index: -1; }
  .mvb-center { text-align: center; }
  .mvb-center .mvb-lead, .mvb-center .mvb-title { margin-inline: auto; }
  .mvb-eyebrow { margin: 0 0 .75rem; font: 600 .75rem/1 var(--mv-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mv-accent-fg); }
  .mvb-display { margin: 0; font: 800 clamp(2.4rem, 1.2rem + 5vw, 4.4rem)/1.03 var(--mv-font-display); letter-spacing: -.05em; text-wrap: balance; }
  .mvb-title { margin: 0; max-width: 46rem; font: 700 clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem)/1.1 var(--mv-font-display); letter-spacing: -.035em; text-wrap: balance; }
  .mvb-lead { margin: 1rem 0 0; max-width: 38rem; color: var(--mv-fg-muted); font-size: 1.1rem; line-height: 1.65; }
  .mvb-muted { color: var(--mv-fg-muted); }
  .mvb-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
  .mvb-center .mvb-actions { justify-content: center; }
  .mvb-fine { margin: 1rem 0 0; font-size: .8125rem; color: var(--mv-fg-subtle); }
  .mvb-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
  .mvb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
  .mvb-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .mvb-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem; border: 1px solid var(--mv-border); border-radius: 999px; background: color-mix(in oklch, var(--mv-surface) 80%, transparent); font-size: .8125rem; text-decoration: none; color: inherit; }
  .mvb-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: .75rem; border-radius: var(--mv-radius-md); background: var(--mv-accent-subtle); color: var(--mv-accent-fg); }
  .mvb-icon svg { width: 1.1rem; height: 1.1rem; }

  /* Navbar */
  .mvb-nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: color-mix(in oklch, var(--mv-bg) 75%, transparent); border-bottom: 1px solid var(--mv-border); }
  .mvb-nav-in { display: flex; align-items: center; gap: 1.5rem; height: 3.75rem; }
  .mvb-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: inherit; }
  .mvb-logo i { width: 1.6rem; height: 1.6rem; border-radius: .5rem; background: linear-gradient(135deg, oklch(0.75 0.16 var(--mv-accent-h)), oklch(0.5 0.24 calc(var(--mv-accent-h) + 40))); }
  .mvb-links { display: flex; gap: .25rem; margin-inline: auto; font-size: .875rem; }
  .mvb-links a { padding: .4rem .7rem; border-radius: var(--mv-radius-md); color: var(--mv-fg-muted); text-decoration: none; }
  .mvb-links a:hover { color: var(--mv-fg); background: var(--mv-bg-muted); }
  .mvb-nav-end { display: flex; align-items: center; gap: .5rem; }
  @media (max-width: 720px) { .mvb-links { display: none; } .mvb-nav-end { margin-left: auto; } }

  /* Forms */
  .mvb-inline-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; max-width: 30rem; }
  .mvb-center .mvb-inline-form { margin-inline: auto; justify-content: center; }
  .mvb-inline-form .mv-input { flex: 1 1 14rem; height: 2.75rem; border-radius: 999px; padding-inline: 1rem; }

  /* Stats */
  .mvb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); border: 1px solid var(--mv-border); border-radius: var(--mv-radius-2xl); background: var(--mv-bg-subtle); overflow: hidden; }
  .mvb-stat { display: grid; gap: .3rem; padding: 1.5rem 1.25rem; text-align: center; border-left: 1px solid var(--mv-border); margin-left: -1px; }
  .mvb-stat strong { font: 800 clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem)/1 var(--mv-font-display); letter-spacing: -.04em; }
  .mvb-stat span { font-size: .8125rem; color: var(--mv-fg-muted); }

  /* Pricing */
  .mvb-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
  .mvb-plans .mv-card { position: relative; }
  .mvb-plans .mv-card-content { flex: 1; }
  .mvb-plans .mv-card-footer .mv-button { width: 100%; }
  .mvb-price { margin: 0 0 1rem; font: 800 2.4rem/1 var(--mv-font-display); letter-spacing: -.04em; }
  .mvb-price small { font: 500 .9rem var(--mv-font-sans); color: var(--mv-fg-muted); letter-spacing: 0; }
  .mvb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9rem; }
  .mvb-list li::before { content: "✓  "; color: var(--mv-accent-fg); font-weight: 700; }
  .mvb-featured { border-color: color-mix(in oklch, var(--mv-accent) 50%, var(--mv-border)); box-shadow: var(--mv-shadow-xl); }
  .mvb-billing [role="tablist"] { margin: 0 auto 2rem; }

  /* Quotes */
  .mvb-quote { width: 20rem; margin: 0; padding: 1.1rem 1.2rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-xl); background: var(--mv-surface); font-size: .9rem; }
  .mvb-quote blockquote { margin: 0 0 .9rem; line-height: 1.55; }
  .mvb-quote figcaption { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; }
  .mvb-quote small { display: block; color: var(--mv-fg-muted); }

  /* Logos */
  .mvb-logo-word { font: 700 clamp(1.1rem, 1rem + .6vw, 1.45rem)/1 var(--mv-font-display); letter-spacing: -.03em; color: var(--mv-fg-subtle); white-space: nowrap; }

  /* Footer */
  .mvb-footer { border-top: 1px solid var(--mv-border); font-size: .875rem; color: var(--mv-fg-muted); }
  .mvb-footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-block: 2rem; }
  .mvb-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
  .mvb-footer a { color: inherit; text-decoration: none; }
  .mvb-footer a:hover { color: var(--mv-fg); }

  /* Misc */
  .mvb-code { display: flex; align-items: center; gap: .5rem; max-width: 30rem; margin: 1.5rem auto 0; padding: .4rem .4rem .4rem 1rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg); background: var(--mv-bg-subtle); font: .875rem var(--mv-font-mono); }
  .mvb-code code { flex: 1; text-align: left; }
  .mvb-banner { position: relative; display: grid; place-items: center; min-height: 18rem; padding: 2rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-2xl); overflow: hidden; isolation: isolate; text-align: center; }
  .mvb-orbit-core { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1.2rem; color: #fff; background: linear-gradient(145deg, oklch(0.72 0.17 var(--mv-accent-h)), oklch(0.48 0.24 calc(var(--mv-accent-h) + 20))); font-weight: 800; }
  .mvb-orbit-node { display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--mv-border); background: var(--mv-surface-raised); box-shadow: var(--mv-shadow-md); font-size: .7rem; font-weight: 700; }
  .mvb-mock { position: relative; padding: 1.25rem; }
  .mvb-mock-bar { height: .6rem; border-radius: 1em; background: var(--mv-bg-emphasis); }
  .mvb-mock-bar + .mvb-mock-bar { margin-top: .6rem; }