/*
 * Musen marketing tokens + primitives.
 * Generated from server/design-tokens.js + server/marketing-css.js.
 * Do not edit this file by hand — re-run `npm run build:css` instead.
 */
/* Musen marketing tokens + primitives. generated from server/design-tokens.js. Do not edit by hand. */

@font-face{
  font-family:"Helvetica Neue";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("/fonts/HelveticaNeue-Light.otf") format("opentype");
}
@font-face{
  font-family:"Helvetica Neue";
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url("/fonts/HelveticaNeue-LightItalic.otf") format("opentype");
}
@font-face{
  font-family:"Helvetica Neue";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/HelveticaNeue-Regular.otf") format("opentype");
}
@font-face{
  font-family:"Helvetica Neue";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/HelveticaNeue-Italic.ttf") format("truetype");
}
@font-face{
  font-family:"Helvetica Neue";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/HelveticaNeue-Medium.otf") format("opentype");
}
@font-face{
  font-family:"Helvetica Neue";
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/HelveticaNeue-MediumItalic.otf") format("opentype");
}
@font-face{
  font-family:"Helvetica Neue";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/HelveticaNeue-Bold.otf") format("opentype");
}
@font-face{
  font-family:"Helvetica Neue";
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url("/fonts/HelveticaNeue-BoldItalic.otf") format("opentype");
}

:root{
  --musen-bg-page:#000000;
  --musen-bg-surface:#121212;
  --musen-bg-surface-alt:#181818;
  --musen-bg-surface-muted:#1A1A1A;
  --musen-bg-surface-deep:#0F1011;
  --musen-text-primary:#F6F4EB;
  --musen-text-muted:#C8C6BE;
  --musen-text-subtle:#908E89;
  --musen-text-on-accent:#161A1C;
  --musen-accent-yellow:#FFEE02;
  --musen-accent-lavender:#8B7FA8;
  --musen-accent-red:#C42E2E;
  --musen-neutral-44:#444444;
  --musen-white:#FFFFFF;
  --musen-black:#000000;
  --musen-line-08:rgba(255,255,255,0.08);
  --musen-line-10:rgba(255,255,255,0.10);
  --musen-line-15:rgba(255,255,255,0.15);
  --musen-line-light-65:rgba(246,244,235,0.65);
  --musen-line-yellow-30:rgba(255,238,2,0.30);
  --musen-line-yellow-40:rgba(255,238,2,0.40);
  --musen-line-yellow-65:rgba(255,238,2,0.65);
  --musen-overlay-60:rgba(0,0,0,0.60);
  --musen-overlay-68:rgba(0,0,0,0.68);
  --musen-overlay-93:rgba(0,0,0,0.93);
  --musen-gradient-warm:linear-gradient(180deg,#F6F4EB 0%,#908E89 100%);
  --musen-gradient-warm-reverse:linear-gradient(180deg,#908E89 0%,#F6F4EB 100%);
  --musen-gradient-vignette:radial-gradient(circle at 50% 30%,#3B3A3A 0%,#1A1A1A 100%);
  --musen-gradient-hero-overlay:linear-gradient(90deg,rgba(0,0,0,0.93) 0%,rgba(20,20,20,0.80) 50%,rgba(0,0,0,0.30) 100%);
  --musen-radius-sm:2px;
  --musen-radius-sm-plus:4px;
  --musen-radius-md:6px;
  --musen-radius-lg:25px;
  --musen-radius-pill:999px;
  --musen-border-hair:1px;
  --musen-border-regular:1.5px;
  --musen-border-thick:2px;
  --musen-container-max:1280px;
  --musen-content-max:720px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden}
html,body{margin:0;padding:0;background:var(--musen-bg-page);color:var(--musen-text-primary)}
body{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none;transition:color 0.15s ease}
a:hover{color:var(--musen-accent-yellow)}
button{font:inherit;cursor:pointer;background:transparent;border:none;color:inherit;padding:0}
::selection{background:var(--musen-accent-yellow);color:var(--musen-text-on-accent)}

.musen-container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px;position:relative}
.musen-content{max-width:720px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px}
.musen-section{position:relative;padding-top:96px;padding-bottom:96px}
.musen-section--tight{padding-top:64px;padding-bottom:64px}
.musen-section--hero{padding-top:48px;padding-bottom:64px}
section{position:relative;padding-top:96px;padding-bottom:96px}
.page-boxed{width:100%;max-width:1280px;margin-left:auto;margin-right:auto}
.container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px;position:relative}
.musen-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.musen-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.musen-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.musen-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.musen-stack-8{display:flex;flex-direction:column;gap:8px}
.musen-stack-16{display:flex;flex-direction:column;gap:16px}
.musen-stack-24{display:flex;flex-direction:column;gap:24px}
.musen-stack-32{display:flex;flex-direction:column;gap:32px}
.musen-stack-48{display:flex;flex-direction:column;gap:48px}
.musen-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.musen-row-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px}
@media(max-width:1024px){
  .musen-container,.container{padding-left:20px;padding-right:20px}
  .musen-section,section{padding-top:64px;padding-bottom:64px}
  .musen-grid-3,.musen-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .musen-section,section{padding-top:48px;padding-bottom:48px}
  .musen-grid-2,.musen-grid-3,.musen-grid-4{grid-template-columns:1fr}
}

.text-landing-title-big{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:50px;line-height:60px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-title-light{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:48px;line-height:57.6px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-paragraph{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:36px;line-height:43.2px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-subtitle{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:28px;line-height:32px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-paragraph-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:32px;line-height:36px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-blog-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:26px;line-height:30px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-body{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-body-muted{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:22px;line-height:30px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-list-bold{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-landing-list-regular{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:15px;line-height:24px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-button{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:16px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-button-small{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:15px;line-height:20px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-nav{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-caption{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:13px;line-height:20.15px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-date{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:13px;line-height:20.15px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-ui-micro{font-family:"Inter","Helvetica Neue",sans-serif;font-weight:400;font-size:10px;line-height:12.1px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.text-ui-small{font-family:"Inter","Helvetica Neue",sans-serif;font-weight:600;font-size:14px;line-height:21.7px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.gradient-text{background-image:var(--musen-gradient-warm);background-clip:text;-webkit-background-clip:text;color:transparent;display:inline-block}
.page-hero,.hero{padding-top:48px;padding-bottom:48px;text-align:left}
.page-hero h1,.hero h1{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:50px;line-height:60px;letter-spacing:0;background-image:var(--musen-gradient-warm);background-clip:text;-webkit-background-clip:text;color:transparent;margin-bottom:24px;display:block}
.page-hero h1 strong,.hero h1 strong{font-weight:700;display:inline}
.page-hero .lead,.hero .lead{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:22px;line-height:30px;letter-spacing:0;color:var(--musen-text-primary);max-width:780px;margin-bottom:28px}
.page-hero .cta-row,.hero .cta-row,.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.hero .store-badges,.page-hero .store-badges{display:flex;flex-wrap:wrap;gap:12px;font-family:"Inter","Helvetica Neue",sans-serif;font-weight:600;font-size:14px;line-height:21.7px;letter-spacing:0;color:var(--musen-text-subtle);margin-top:24px}
.section-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:48px;line-height:57.6px;letter-spacing:0;background-image:var(--musen-gradient-warm);background-clip:text;-webkit-background-clip:text;color:transparent;margin-bottom:24px;display:inline-block}
.section-subtitle,.section-intro{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:22px;line-height:30px;letter-spacing:0;color:var(--musen-text-primary);max-width:820px;margin-bottom:32px}
@media(max-width:768px){
  .page-hero h1,.hero h1{font-size:36px;line-height:42px}
  .section-title{font-size:32px;line-height:38px}
  .text-landing-title-big{font-size:36px;line-height:42px}
  .text-landing-title-light{font-size:32px;line-height:38px}
  .text-landing-paragraph{font-size:24px;line-height:30px}
}

.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:var(--musen-radius-lg);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:16px;letter-spacing:0;text-align:center;border:var(--musen-border-thick) solid transparent;transition:background-color 0.15s ease,color 0.15s ease,border-color 0.15s ease;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{text-decoration:none}
/* Primary yellow CTA (Figma 3323:2383 launch button): a flat rectangle
   with the smallest radius in the scale so it reads as a hard yellow
   card rather than a pill. Used everywhere the launch / signup CTAs
   appear across the marketing surface. */
.btn-primary,a.btn-primary{background:var(--musen-accent-yellow);color:var(--musen-text-on-accent);border-color:var(--musen-accent-yellow);height:50px;padding:0 24px;border-radius:var(--musen-radius-sm);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:16px;letter-spacing:0;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease,color 0.15s ease;text-decoration:none}
.btn-primary:hover,a.btn-primary:hover{background:#FFF566;color:var(--musen-text-on-accent);text-decoration:none}
.btn-outline,a.btn-outline{background:transparent;color:var(--musen-text-primary);border:var(--musen-border-thick) solid var(--musen-line-light-65);height:50px;padding:0 24px;border-radius:var(--musen-radius-lg);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:16px;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease,border-color 0.15s ease;text-decoration:none}
.btn-outline:hover,a.btn-outline:hover{background:var(--musen-line-08);border-color:var(--musen-text-primary);text-decoration:none}
.btn-outline-yellow,a.btn-outline-yellow{background:transparent;color:var(--musen-accent-yellow);border:var(--musen-border-thick) solid var(--musen-line-yellow-65);height:50px;padding:0 24px;border-radius:var(--musen-radius-lg);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:16px;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease,border-color 0.15s ease;text-decoration:none}
.btn-outline-yellow:hover,a.btn-outline-yellow:hover{background:rgba(255,238,2,0.08);border-color:var(--musen-accent-yellow);text-decoration:none}
.btn-white,a.btn-white{background:var(--musen-white);color:var(--musen-black);border-color:var(--musen-white);height:50px;padding:0 24px;border-radius:var(--musen-radius-lg);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:16px;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease;text-decoration:none}
.btn-white:hover,a.btn-white:hover{background:#EFEFEF;color:var(--musen-black);text-decoration:none}
/* Red Creator CTA: squared rectangle matching .btn-primary's shape so
   the Creator signup reads as the same flat-card button family. */
.btn-red,a.btn-red{background:var(--musen-accent-red);color:var(--musen-text-primary);border-color:var(--musen-accent-red);height:50px;padding:0 24px;border-radius:var(--musen-radius-sm);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:16px;letter-spacing:0;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease;text-decoration:none}
.btn-red:hover,a.btn-red:hover{background:#D43E3E;color:var(--musen-text-primary);text-decoration:none}
.btn-ghost{background:transparent;color:var(--musen-text-primary);height:50px;padding:0 24px;border-radius:var(--musen-radius-lg);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:15px;line-height:20px;letter-spacing:0;display:inline-flex;align-items:center;text-decoration:none}
.btn-ghost:hover{background:var(--musen-line-08);color:var(--musen-text-primary);text-decoration:none}
.btn-sm{height:38px;padding:0 16px;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:15px;line-height:20px;letter-spacing:0;}

.card{background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:24px;position:relative}
.card-elevated{background:var(--musen-bg-surface-alt);border:var(--musen-border-hair) solid var(--musen-line-10);border-radius:var(--musen-radius-smPlus,4px);padding:24px}
.card-flat{background:var(--musen-bg-surface-muted);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:24px}
.card-quote{background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:24px;display:flex;flex-direction:column;height:100%}

/* Blog tile card (Figma 3329:9918 "Article" pattern). Full-card link with
   the article initial as a stylised image background, a dark gradient
   overlay for legibility, and date + UPPERCASE title overlaid in the
   upper-left. The article description is kept in the DOM but visually
   hidden (.sr-only) so crawlers + screen readers see it, but the visual
   card stays clean per Figma. Used by both /blog (index grid) and the
   "Further reading" strip on each article. */
.card-blog{position:relative;display:block;border-radius:var(--musen-radius-md);overflow:hidden;aspect-ratio:16/9;isolation:isolate;text-decoration:none;background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-08);transition:border-color 0.15s ease,transform 0.2s ease}
.card-blog:hover{border-color:var(--musen-line-yellow-40);text-decoration:none;transform:translateY(-2px)}
.card-blog .card-blog-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--musen-gradient-vignette);color:rgba(255,255,255,0.18);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:220px;line-height:1;letter-spacing:-0.05em;z-index:0;pointer-events:none;user-select:none}
.card-blog::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.25) 40%,rgba(0,0,0,0) 100%);z-index:1;pointer-events:none}
.card-blog .card-blog-overlay{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:24px;z-index:2}
.card-blog .card-blog-date{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:13px;line-height:20.15px;letter-spacing:0;color:rgba(255,255,255,0.75);text-transform:uppercase;letter-spacing:0.08em}
.card-blog .card-blog-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:26px;line-height:30px;letter-spacing:0;color:var(--musen-text-primary);text-transform:uppercase;letter-spacing:0;margin:0;max-width:75%}
.card-blog:hover .card-blog-title{color:var(--musen-accent-yellow)}
/* 2-column grid for the blog list. Collapses to a single column on phones. */
.card-blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0}
@media(max-width:768px){.card-blog-grid{grid-template-columns:1fr}.card-blog .card-blog-image{font-size:180px}.card-blog .card-blog-title{max-width:90%}}
/* Visually-hidden utility (used to keep blog descriptions + dates in the DOM
   for SEO and screen readers without rendering them on the dark tile). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Pricing card */
.card-pricing{background:var(--musen-bg-surface);border:var(--musen-border-thick) solid var(--musen-line-10);border-radius:var(--musen-radius-md);padding:32px;display:flex;flex-direction:column;gap:16px;height:100%}
.card-pricing.featured{border-color:var(--musen-accent-yellow)}
.card-pricing.creator{border-color:var(--musen-accent-red)}
.card-pricing .card-pricing-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:32px;line-height:36px;letter-spacing:0;color:var(--musen-text-primary)}
.card-pricing .card-pricing-price{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:48px;line-height:57.6px;letter-spacing:0;color:var(--musen-text-primary);display:flex;align-items:baseline;gap:6px}
.card-pricing .card-pricing-price small{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:15px;line-height:24px;letter-spacing:0;color:var(--musen-text-subtle);font-weight:400}
.card-pricing .card-pricing-tagline{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted)}
.card-pricing ul{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.card-pricing ul li{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:15px;line-height:24px;letter-spacing:0;color:var(--musen-text-primary);padding-left:20px;position:relative}
.card-pricing ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--musen-accent-yellow);border-radius:var(--musen-radius-pill)}
.card-pricing.creator ul li::before{background:var(--musen-accent-red)}

/* "What you unlock" card (Figma 3328:9774). Modifier on .card-pricing
   for the single full-width hero card on /premium and /creator. No
   outline border (the photographic background + radial overlay carry
   the visual weight); bullets are subtle white dots followed by a bold
   label and em-dash + description. The CTA + price hint sit on a
   flex row anchored to the bottom of the card. */
.card-pricing-unlock{border:none;padding:48px;display:flex;flex-direction:column;gap:16px}
.card-pricing-unlock-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:48px;line-height:57.6px;letter-spacing:0;color:var(--musen-text-primary);margin:0}
.card-pricing-unlock-sub{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted);margin:0 0 8px 0}
.card-pricing-unlock-accent{font-weight:700}
.card-pricing-unlock--premium .card-pricing-unlock-accent{color:var(--musen-accent-yellow)}
.card-pricing-unlock--creator .card-pricing-unlock-accent{color:var(--musen-accent-red)}
.card-pricing.card-pricing-unlock ul.card-pricing-unlock-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.card-pricing.card-pricing-unlock ul.card-pricing-unlock-list li{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted);position:relative;padding-left:24px}
/* Override .card-pricing ul li::before so bullets are subtle white dots,
   not the bright yellow/red tier dots used on the homepage tiles. */
.card-pricing.card-pricing-unlock ul.card-pricing-unlock-list li::before{content:"";position:absolute;left:8px;top:14px;width:4px;height:4px;background:rgba(255,255,255,0.55);border-radius:var(--musen-radius-pill)}
.card-pricing.card-pricing-unlock ul.card-pricing-unlock-list li strong{color:var(--musen-text-primary);font-weight:700}
.card-pricing-unlock-soft{color:var(--musen-text-subtle);font-weight:400}
.card-pricing-unlock-body{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);margin:16px 0 0 0;font-weight:700}
.card-pricing-unlock-offer{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-accent-yellow);margin:8px 0 0 0;font-weight:700}
.card-pricing-unlock--creator .card-pricing-unlock-offer{color:var(--musen-accent-red)}
.card-pricing-unlock-offer-sub{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted);margin:0}
.card-pricing-unlock-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:auto;padding-top:16px;flex-wrap:wrap}
.card-pricing-unlock-price{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted)}
@media(max-width:768px){
  .card-pricing-unlock{padding:32px}
  .card-pricing-unlock-bottom{justify-content:flex-start}
}

/* Big framed feature card (existing /about, /premium, /creator pattern, restyled) */
.feature-card-framed{background:var(--musen-bg-surface-muted);border:var(--musen-border-thick) solid var(--musen-text-primary);border-radius:var(--musen-radius-md);padding:48px;position:relative;overflow:hidden;margin-bottom:24px}
.feature-card-framed.yellow{border-color:var(--musen-accent-yellow)}
.feature-card-framed.red{border-color:var(--musen-accent-red)}
.feature-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.feature-card-overlay{position:absolute;inset:0;background:var(--musen-gradient-hero-overlay);z-index:1}
.feature-card-content{position:relative;z-index:2;color:var(--musen-text-primary)}
.feature-card-content h2{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:48px;line-height:57.6px;letter-spacing:0;color:var(--musen-text-primary);margin-bottom:24px}
.feature-card-content .highlight{color:var(--musen-accent-yellow)}
.feature-card-content p{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);margin-bottom:16px}
.feature-card-content ul{display:flex;flex-direction:column;gap:8px;margin:16px 0 24px}
.feature-card-content ul li{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:15px;line-height:24px;letter-spacing:0;color:var(--musen-text-primary);padding-left:20px;position:relative}
.feature-card-content ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--musen-text-primary);border-radius:var(--musen-radius-pill)}
.feature-card-content ul li strong{font-weight:700;color:var(--musen-text-primary)}
.feature-card-content .coming-soon-tag{color:var(--musen-text-subtle);font-style:italic}
.feature-card-content .offer-text{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-accent-yellow);margin-bottom:4px;margin-top:16px}
.feature-card-content .offer-sub{font-family:"Inter","Helvetica Neue",sans-serif;font-weight:600;font-size:14px;line-height:21.7px;letter-spacing:0;color:var(--musen-text-primary);margin-bottom:16px}
.feature-card-content .cta-row{display:flex;justify-content:flex-end;align-items:center;gap:24px;margin-top:20px;flex-wrap:wrap}
.feature-card-content .price-text{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary)}
@media(max-width:1024px){.feature-card-framed{padding:32px}}
@media(max-width:768px){.feature-card-framed{padding:24px}.feature-card-content .cta-row{justify-content:flex-start}}

/* Differentiator 2x2 table (Figma 3323:2383 "What makes musen different").
   Four cells in a 2-column grid; each cell is itself a 2-column row with
   muted body copy on the LEFT (right-aligned so it hugs the divider) and
   a bold UPPERCASE title on the RIGHT. Layout collapses to a single
   stacked column on phones for legibility. */
.features-2x2{display:grid;grid-template-columns:1fr 1fr;gap:64px 80px;margin-top:32px}
.feature-row-item{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.feature-row-item .feature-body{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted);text-align:right;margin:0}
.feature-row-item .feature-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:32px;line-height:36px;letter-spacing:0;font-weight:700;font-size:24px;line-height:28px;letter-spacing:0.02em;text-transform:uppercase;color:var(--musen-text-primary);margin:0}
@media(max-width:1024px){
  .features-2x2{gap:48px}
  .feature-row-item{gap:24px}
  .feature-row-item .feature-title{font-size:20px;line-height:24px}
}
@media(max-width:768px){
  .features-2x2{grid-template-columns:1fr;gap:40px}
  .feature-row-item{grid-template-columns:1fr;gap:8px}
  .feature-row-item .feature-body{text-align:left;order:2}
  .feature-row-item .feature-title{order:1}
}

/* Demo card (homepage "Press play for a taste", Figma 3323:2383).
   Dark rounded rectangle with a 2-column grid:
   - LEFT (.demo-card-copy):  heading, body copy, 3 preset chips
   - RIGHT (.demo-card-cover): square cover art + functional <audio>
   The card widens to ~1080px and the grid collapses to one column below 900px. */
.demo-card{background:var(--musen-bg-surface-alt);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:32px;max-width:1080px;margin-left:auto;margin-right:auto}
.demo-card h2{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:36px;line-height:43.2px;letter-spacing:0;color:var(--musen-text-primary);margin-bottom:12px}
.demo-card p{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted);margin-bottom:20px}
.demo-card audio{width:100%;margin-top:12px}
.demo-card .preset-row,.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.demo-card .preset-btn,.preset-btn{padding:8px 16px;border-radius:var(--musen-radius-pill);border:var(--musen-border-hair) solid var(--musen-line-15);background:transparent;color:var(--musen-text-primary);font-family:"Inter","Helvetica Neue",sans-serif;font-weight:600;font-size:14px;line-height:21.7px;letter-spacing:0;cursor:pointer}
.demo-card .preset-btn[aria-pressed="true"],.preset-btn[aria-pressed="true"]{border-color:var(--musen-accent-yellow);background:var(--musen-accent-yellow);color:var(--musen-text-on-accent)}
.demo-card-grid{display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
@media(min-width:1024px){.demo-card-grid{grid-template-columns:1.2fr 1fr;gap:48px}}
.demo-card-copy{min-width:0}
.demo-card-cover{display:flex;flex-direction:column;gap:16px;align-items:center;min-width:0}
.demo-cover-art{display:block;width:100%;max-width:280px;height:auto;border-radius:var(--musen-radius-md);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.demo-card-cover audio{width:100%;max-width:320px}

.tag{display:inline-flex;align-items:center;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:13px;line-height:20.15px;letter-spacing:0;color:var(--musen-text-primary);background:transparent;border:var(--musen-border-hair) solid var(--musen-line-15);border-radius:var(--musen-radius-sm);padding:2px 8px;height:21px;letter-spacing:0.04em}
.tag-yellow{border-color:var(--musen-line-yellow-65);color:var(--musen-accent-yellow)}
.tag-solid{background:var(--musen-accent-yellow);color:var(--musen-text-on-accent);border-color:var(--musen-accent-yellow)}
.hairline-row{height:0;border:none;border-top:var(--musen-border-hair) solid var(--musen-line-08);margin:24px 0}
.hairline-strong{border-top-color:var(--musen-line-15)}
.hairline-col{width:0;border:none;border-left:var(--musen-border-hair) solid var(--musen-line-08);align-self:stretch}
/* Section indicator (Figma "yellow tag"): a flat yellow rectangle with
   dark text and a leading "." prefix. Replaces the older "yellow dot +
   uppercase label" treatment. The .red and .white modifier classes on
   .section-indicator-dot are kept as no-ops (display:none) so existing
   HTML in pages.js continues to render without churn. */
.section-indicator{display:flex;align-items:center;gap:0;margin-bottom:24px;padding:4px 10px;border-radius:var(--musen-radius-sm);background:var(--musen-accent-yellow);width:fit-content;max-width:max-content}
.section-indicator-dot{display:none}
.section-indicator-label{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:13px;line-height:20.15px;letter-spacing:0;color:var(--musen-text-on-accent);font-weight:700;letter-spacing:0;text-transform:none}
.section-indicator-label::before{content:".";color:var(--musen-text-on-accent);font-weight:700;margin-right:1px}

.musen-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;max-width:1280px;margin:0 auto;position:relative}
.musen-nav .musen-logo{display:inline-flex;align-items:center}
.musen-nav .musen-logo img{height:22px;width:auto;display:block}
.musen-nav .musen-nav-links,.musen-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;align-items:center}
.musen-nav .musen-nav-links a,.musen-nav ul a{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0;color:var(--musen-text-primary);transition:color 0.15s ease}
.musen-nav .musen-nav-links a:hover,.musen-nav ul a:hover{color:var(--musen-accent-yellow)}
/* Nav "Open musen" CTA renders as the same squared yellow button as
   the hero .btn-primary (Figma 3323:2383): solid yellow rectangle with
   dark text instead of yellow inline text. */
.musen-nav .musen-nav-launch{background:var(--musen-accent-yellow);color:var(--musen-text-on-accent)!important;font-weight:700;padding:8px 16px;border-radius:var(--musen-radius-sm);transition:background-color 0.15s ease}
.musen-nav .musen-nav-launch:hover{background:#FFF566;color:var(--musen-text-on-accent)!important;opacity:1;text-decoration:none}
/* Overlay variant (homepage only): nav sits ON TOP of the hero video
   instead of in its own band above. Transparent background, light text,
   z-index above .hero-video-overlay. Used inside .hero-video-content. */
.musen-nav--overlay{background:transparent;border-bottom:none;padding-top:24px;padding-bottom:24px;position:relative;z-index:3}
.musen-nav--overlay .musen-logo,.musen-nav--overlay ul a{color:var(--musen-text-primary)}
/* Active-page indicator: a 2px yellow underline rendered as ::after so it
   does not shift the link's box on hover/active. */
.musen-nav-links a[aria-current="page"]{color:var(--musen-accent-yellow);position:relative}
.musen-nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--musen-accent-yellow);border-radius:2px}
@media(max-width:768px){
  .musen-nav{padding:16px 20px}
  .musen-nav .musen-nav-links,.musen-nav ul{display:none}
  .musen-nav .musen-nav-links.is-open{display:flex;position:absolute;top:100%;right:20px;flex-direction:column;background:var(--musen-bg-surface-alt);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:16px;gap:8px}
}

.faq{display:flex;flex-direction:column;width:100%;margin:32px 0}
.faq details{width:100%;min-width:0;padding:20px 0;border-top:var(--musen-border-hair) solid var(--musen-line-08);box-sizing:border-box}
.faq details:last-child{border-bottom:var(--musen-border-hair) solid var(--musen-line-08)}
.faq summary{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:32px;line-height:36px;letter-spacing:0;font-size:22px;line-height:28px;color:var(--musen-text-primary);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;min-width:0}
.faq summary > *:first-child{flex:1 1 auto;min-width:0;overflow-wrap:break-word;word-break:break-word}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--musen-accent-yellow);font-size:24px;font-weight:300;line-height:1;flex:0 0 24px;width:24px;text-align:center;transition:transform 0.15s ease}
.faq details[open] summary{color:var(--musen-accent-yellow)}
.faq details[open] summary::after{content:"−"}
.faq details > *{min-width:0;max-width:100%;box-sizing:border-box}
.faq details > p,.faq details > div{margin-top:12px;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted);padding-bottom:8px;overflow-wrap:break-word;word-break:break-word;max-width:100%}
.faq details > p a,.faq details > div a{color:var(--musen-accent-yellow);word-break:break-word}

.comparison-card{background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:0;margin:24px 0;overflow:hidden}
.comparison-table{width:100%;border-collapse:collapse;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;}
.comparison-table thead th{text-align:left;padding:16px 20px;color:var(--musen-text-primary);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;;border-bottom:var(--musen-border-hair) solid var(--musen-line-15)}
.comparison-table thead th.musen-col{color:var(--musen-accent-yellow)}
.comparison-table tbody td{padding:16px 20px;border-bottom:var(--musen-border-hair) solid var(--musen-line-08);color:var(--musen-text-primary);vertical-align:top}
.comparison-table tbody tr:last-child td{border-bottom:none}
.comparison-table tbody td:first-child{color:var(--musen-text-subtle);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:15px;line-height:24px;letter-spacing:0;}
.comparison-table tbody td.musen-col{color:var(--musen-accent-yellow);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;}
.press-table{width:100%;border-collapse:collapse;margin:24px 0;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;}
.press-table th,.press-table td{padding:14px 0;border-bottom:var(--musen-border-hair) solid var(--musen-line-08);text-align:left;vertical-align:top;color:var(--musen-text-primary)}
.press-table th{color:var(--musen-text-subtle);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:15px;line-height:24px;letter-spacing:0;;width:28%;padding-right:16px}
.press-table a{color:var(--musen-accent-yellow)}
.press-boilerplate{background:var(--musen-bg-surface);border-left:3px solid var(--musen-accent-yellow);padding:20px 24px;margin:24px 0;color:var(--musen-text-primary);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;;border-radius:var(--musen-radius-sm)}
@media(max-width:768px){
  .comparison-table,.comparison-table thead,.comparison-table tbody,.comparison-table tr,.comparison-table td,.comparison-table th{display:block;width:100%}
  .comparison-table thead{display:none}
  .comparison-table tbody tr{border-bottom:var(--musen-border-hair) solid var(--musen-line-10);padding:16px 20px}
  .comparison-table tbody td{padding:6px 0;border:none}
  .comparison-table tbody td:first-child{color:var(--musen-accent-yellow);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:13px;line-height:20.15px;letter-spacing:0;;text-transform:uppercase}
  .comparison-table tbody td:nth-child(2)::before{content:"musen: ";color:var(--musen-accent-yellow);font-weight:700}
  .comparison-table tbody td:nth-child(3)::before{content:attr(data-competitor) ": ";color:var(--musen-text-subtle);font-weight:600}
}

.blog-grid{display:grid;gap:24px;margin-top:24px;grid-template-columns:1fr}
.blog-card{background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:24px;display:flex;flex-direction:column;gap:8px;transition:border-color 0.15s ease,background-color 0.15s ease}
.blog-card:hover{border-color:var(--musen-line-yellow-40);background:var(--musen-bg-surface-alt)}
.blog-card time{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:13px;line-height:20.15px;letter-spacing:0;color:var(--musen-text-subtle);text-transform:uppercase;letter-spacing:0.08em}
.blog-card h3{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:26px;line-height:30px;letter-spacing:0;color:var(--musen-text-primary)}
.blog-card h3 a{color:inherit}
.blog-card h3 a:hover{color:var(--musen-accent-yellow)}
.blog-card p{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted)}
.blog-card .blog-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
@media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Blog article body */
.article-body{max-width:720px;margin:0 auto;padding:0 0 32px}
.article-body h2{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:32px;line-height:36px;letter-spacing:0;color:var(--musen-text-primary);margin:40px 0 16px}
.article-body p{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);margin-bottom:20px}
.article-body p strong{font-weight:700}
.article-body a{color:var(--musen-accent-yellow);text-decoration:underline;text-underline-offset:3px}
.article-cta{margin:40px auto;max-width:720px;padding:32px;background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-yellow-40);border-radius:var(--musen-radius-md);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.article-cta .article-cta-text{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);max-width:520px}
.article-related{max-width:720px;margin:0 auto;padding-top:32px}
.article-related .section-indicator{margin-bottom:16px}

/* Article TL;DR callout, sits between hero and body */
.article-tldr{max-width:720px;margin:0 auto 32px;padding:20px 24px;background:rgba(255,238,2,0.04);border-left:3px solid var(--musen-accent-yellow);border-radius:var(--musen-radius-sm)}
.article-tldr .article-tldr-label{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:13px;line-height:20.15px;letter-spacing:0;color:var(--musen-accent-yellow);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px}
.article-tldr p{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);margin:0}

/* Article further reading block */
.article-further-reading{max-width:720px;margin:48px auto 0;padding-top:32px;border-top:var(--musen-border-hair) solid var(--musen-line-08)}
.article-further-reading .section-indicator{margin-bottom:16px}

/* Features grid */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-bottom:24px}
.feature-card,.feature-card-item{position:relative;display:flex;flex-direction:column;gap:12px}
.feature-header{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.feature-icon{width:36px;height:32px}
.feature-name{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:32px;line-height:36px;letter-spacing:0;color:var(--musen-text-primary);font-size:24px;line-height:28px}
.feature-description,.feature-card-item p{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted);padding-left:50px}
@media(max-width:1024px){
  .features-grid{grid-template-columns:1fr;gap:24px}
  .feature-description,.feature-card-item p{padding-left:0}
}

/* When-to-pick pair */
.when-to-pick{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}
.when-to-pick .pick-card{background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:28px;display:flex;flex-direction:column;gap:12px}
.when-to-pick .pick-card.yellow{border-color:var(--musen-line-yellow-40)}
.when-to-pick .pick-card h3{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:32px;line-height:36px;letter-spacing:0;font-size:22px;line-height:26px;color:var(--musen-text-primary)}
.when-to-pick .pick-card.yellow h3{color:var(--musen-accent-yellow)}
.when-to-pick .pick-card p{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary)}
@media(max-width:768px){.when-to-pick{grid-template-columns:1fr}}

/* Vision / coming-next */
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.vision-description{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:22px;line-height:30px;letter-spacing:0;color:var(--musen-text-primary);margin-bottom:32px}
@media(max-width:1024px){.vision-grid{grid-template-columns:1fr;gap:32px}}
.coming-next-grid{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;margin-top:32px}
.coming-next-item{text-align:center;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:16px}
.coming-next-icon{height:80px;width:auto}
.coming-next-label{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:22px;line-height:30px;letter-spacing:0;color:var(--musen-text-primary)}
@media(max-width:768px){.coming-next-grid{gap:32px}}

/* Reviews grid (homepage + JSON-LD parity) */
/* Reviews strip (Figma 3323:2383): a single horizontally scrollable row
   that breaks out of the .container on the right so the row feels like
   it extends past the viewport edge (infinite scroll). Left edge stays
   aligned with the container. Scrollbar is hidden in every engine; the
   right-edge mask fades the last visible card softly. */
.reviews-grid{display:flex;flex-wrap:nowrap;gap:20px;margin-top:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:16px;padding-bottom:8px;padding-right:48px;-webkit-overflow-scrolling:touch;margin-right:calc(50% - 50vw);scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 96px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 96px),transparent 100%)}
.reviews-grid::-webkit-scrollbar{display:none;width:0;height:0}
/* Review cards (Figma 3323:2383 testimonials strip): the surface is no
   longer flat dark. A soft radial highlight at the top-left fakes a
   directional light source, giving the cards depth without leaving the
   dark palette. Layered over the existing solid surface so the card
   stays legible even if the radial fails to render. */
blockquote.review{margin:0;padding:24px;border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.04) 40%,transparent 75%),var(--musen-bg-surface);display:flex;flex-direction:column;gap:12px;flex:0 0 320px;min-width:320px;max-width:360px;scroll-snap-align:start;position:relative;overflow:hidden}
/* CTA banner: mid-page "Open musen" launchpad. A horizontal strip
   between sections with subtle text + the squared yellow CTA. Designed
   to feel like a natural breath in the flow rather than a hard sell.
   Used twice on the homepage to give the page multiple effortless
   entry points (in addition to the nav + hero). */
.cta-banner{padding:48px 0;background:transparent}
.cta-banner .cta-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:32px;background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);flex-wrap:wrap}
.cta-banner .cta-banner-text{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:300;font-size:36px;line-height:43.2px;letter-spacing:0;color:var(--musen-text-primary);margin:0;flex:1 1 320px;min-width:0}
.cta-banner .cta-banner-btn{flex:0 0 auto}
@media(max-width:768px){
  .cta-banner{padding:32px 0}
  .cta-banner .cta-banner-inner{padding:24px;justify-content:flex-start}
}
blockquote.review .stars{color:var(--musen-accent-yellow);font-size:16px}
blockquote.review p{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);font-style:italic}
blockquote.review cite{font-style:normal;color:var(--musen-text-subtle);font-family:"Inter","Helvetica Neue",sans-serif;font-weight:600;font-size:14px;line-height:21.7px;letter-spacing:0;;margin-top:auto}
blockquote.review cite strong{color:var(--musen-text-primary);font-weight:600}

/* Logo pack grid */
.logo-pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:16px 0}
.logo-pack-card{background:var(--musen-bg-surface);border:var(--musen-border-hair) solid var(--musen-line-08);border-radius:var(--musen-radius-md);padding:20px;display:flex;flex-direction:column;gap:6px}
.logo-pack-card h3{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary)}
.logo-pack-card p{font-family:"Inter","Helvetica Neue",sans-serif;font-weight:600;font-size:14px;line-height:21.7px;letter-spacing:0;color:var(--musen-text-muted)}
.logo-pack-card a{color:var(--musen-accent-yellow)}
/* Social channels list (Press kit). Hairline-separated rows with the
   platform name on the left and the handle/link on the right. No cards
   so long URLs (e.g. alternativeto.net/software/musen) can break onto
   the next line gracefully instead of overflowing a fixed-width card. */
.social-list{list-style:none;padding:0;margin:24px 0 0 0;max-width:760px}
.social-list li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 0;border-bottom:var(--musen-border-hair) solid var(--musen-line-08)}
.social-list li:last-child{border-bottom:none}
.social-list .social-platform{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary);flex:0 0 auto}
.social-list a{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted);text-decoration:none;text-align:right;overflow-wrap:anywhere;word-break:break-word;transition:color 0.15s ease}
.social-list a:hover{color:var(--musen-accent-yellow);text-decoration:none}

/* "More comparisons" strip on /compare/:slug */
.more-compare-strip{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.more-compare-strip .more-compare-item{display:inline-flex;align-items:center;padding:10px 18px;border:var(--musen-border-hair) solid var(--musen-line-15);border-radius:var(--musen-radius-pill);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:15px;line-height:20px;letter-spacing:0;;color:var(--musen-text-primary);background:var(--musen-bg-surface);text-decoration:none}
.more-compare-strip .more-compare-item:hover{border-color:var(--musen-line-yellow-65);color:var(--musen-accent-yellow);text-decoration:none}

/* "Explore the rest of musen" link grid used on /about */
.explore-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;margin-top:24px;border-top:var(--musen-border-hair) solid var(--musen-line-08)}
.explore-row .explore-item{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-bottom:var(--musen-border-hair) solid var(--musen-line-08);text-decoration:none;color:var(--musen-text-primary)}
.explore-row .explore-item:hover{color:var(--musen-accent-yellow);text-decoration:none}
.explore-row .explore-item:hover .explore-item-desc{color:var(--musen-text-primary)}
.explore-row .explore-item-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;font-size:20px;line-height:24px}
.explore-row .explore-item-desc{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-muted)}
@media(min-width:768px){
  .explore-row{grid-template-columns:repeat(2,1fr);column-gap:32px}
  .explore-row .explore-item{padding:20px 0}
}
@media(min-width:1024px){.explore-row{grid-template-columns:repeat(3,1fr)}}

/* Premium / Creator "What you unlock" list (Figma list-bold + list-regular pattern) */
.unlock-list{display:flex;flex-direction:column;margin:24px 0}
.unlock-list .unlock-row{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-top:var(--musen-border-hair) solid var(--musen-line-08)}
.unlock-list .unlock-row:last-child{border-bottom:var(--musen-border-hair) solid var(--musen-line-08)}
.unlock-list .unlock-label{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-text-primary)}
.unlock-list .unlock-desc{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:15px;line-height:24px;letter-spacing:0;color:var(--musen-text-muted)}

/* Footer (yellow band) */
.site-footer{background:var(--musen-accent-yellow);color:var(--musen-black);padding:48px 0;margin-top:64px}
.site-footer .container,.site-footer .musen-container{padding-left:40px;padding-right:40px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;margin-bottom:24px;padding-top:8px}
.social-links{display:flex;gap:16px}
.social-links img,.social-links svg{width:28px;height:28px}
.footer-logo-area{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.logo-wordmark-footer{max-width:160px;width:100%;height:auto;display:block;filter:brightness(0)}
.logo-tagline-footer{color:var(--musen-black);font-family:"Inter","Helvetica Neue",sans-serif;font-weight:600;font-size:14px;line-height:21.7px;letter-spacing:0;;font-weight:300}
.footer-divider{border:none;height:1px;background:var(--musen-black);opacity:0.2;margin:24px 0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 20px;font-family:"Inter","Helvetica Neue",sans-serif;font-weight:600;font-size:14px;line-height:21.7px;letter-spacing:0;;color:var(--musen-black);font-weight:300}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px 22px;margin-bottom:16px}
.footer-nav a{color:var(--musen-black);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:500;font-size:13px;line-height:20.15px;letter-spacing:0;}
.footer-nav a:hover{opacity:0.7;color:var(--musen-black)}
.footer-columns{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:32px 64px;margin-bottom:8px}
.footer-col{display:flex;flex-direction:column;gap:8px;min-width:160px}
.footer-col-title{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:700;font-size:16px;line-height:28.8px;letter-spacing:0;color:var(--musen-black);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;font-size:13px}
.footer-col a{color:var(--musen-black);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:15px;line-height:24px;letter-spacing:0;;font-size:14px;line-height:24px}
.footer-col a:hover{opacity:0.7;color:var(--musen-black)}
@media(max-width:768px){.footer-columns{gap:24px}}
.footer-legal-links{display:flex;gap:20px}
.footer-legal-links a,.footer-email a{color:var(--musen-black)}
.footer-legal-links a:hover,.footer-email a:hover{opacity:0.7;color:var(--musen-black)}
@media(max-width:768px){
  .site-footer{padding:32px 0;margin-top:48px}
  .site-footer .container,.site-footer .musen-container{padding-left:20px;padding-right:20px}
  .footer-top{flex-direction:column;align-items:center;text-align:center}
  .footer-logo-area{align-items:center;order:-1}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:15px}
  .social-links{justify-content:center}
}

time{color:var(--musen-text-subtle);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-weight:400;font-size:13px;line-height:20.15px;letter-spacing:0;}

/* Hero with a self-hosted looping video background.
   - <video class="hero-video-bg"> fills the section, object-fit:cover.
   - <div class="hero-video-overlay"> sits above the video, applies a
     dark gradient so the white H1 + lead are legible.
   - <div class="hero-video-content"> holds the actual hero text + the
     phone mockup; its z-index is above both the video and the overlay.
   - Reduced-motion users see only the poster image. */
.hero-video{position:relative;width:100%;min-height:88vh;overflow:hidden;isolation:isolate;background:var(--musen-bg-page)}
.hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;background:var(--musen-bg-page)}
.hero-video-overlay{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 30% 30%,rgba(0,0,0,0.25),rgba(0,0,0,0.65)),linear-gradient(180deg,rgba(22,26,28,0.35) 0%,rgba(22,26,28,0.85) 100%);pointer-events:none}
.hero-video-content{position:relative;z-index:2}
/* Hero grid (Figma 3323:2383): phone mockup LEFT, copy block RIGHT. */
.hero-grid{display:grid;gap:48px;grid-template-columns:1fr;align-items:center;padding-top:48px;padding-bottom:64px}
.hero-copy{min-width:0}
.hero-phone{display:block;width:100%;max-width:320px;height:auto;justify-self:center;filter:drop-shadow(0 32px 48px rgba(0,0,0,0.45))}
@media(min-width:1024px){
  .hero-video{min-height:780px}
  .hero-grid{grid-template-columns:minmax(280px,440px) 1fr;gap:64px;padding-top:64px;padding-bottom:88px}
  .hero-phone{max-width:380px}
}
@media(max-width:768px){
  .hero-video{min-height:72vh}
  .hero-grid{padding-top:32px;padding-bottom:32px;gap:32px}
  .hero-phone{max-width:260px}
}
/* Users who opt out of motion see the poster image, not the loop. */
@media(prefers-reduced-motion: reduce){
  .hero-video-bg{display:none}
}

/* Wide-format photographic background applied to a <section>. The
   image is dimmed to ~55% so the foreground text + grid stay readable. */
.bg-section{position:relative;isolation:isolate}
.bg-section::before{content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:0.55}
.bg-section::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,26,28,0.60),rgba(22,26,28,0.95))}
.bg-section--01::before{background-image:url('/images/bg-section-01.png')}
.bg-section--02::before{background-image:url('/images/bg-section-02.png')}

/* Photographic backgrounds on the 4 homepage pricing cards. The image
   sits at 60% opacity behind a dark vertical gradient so the white card
   text stays legible at any screen size. Applied via [data-bg="tier"]
   so the markup change is a single attribute on each card. */
.card-pricing[data-bg],.pricing-card[data-bg]{position:relative;isolation:isolate;overflow:hidden}
.card-pricing[data-bg]::before,.pricing-card[data-bg]::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.6;border-radius:inherit;z-index:-2;pointer-events:none}
.card-pricing[data-bg]::after,.pricing-card[data-bg]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,26,28,0.35),rgba(22,26,28,0.90));border-radius:inherit;z-index:-1;pointer-events:none}
.card-pricing[data-bg] > *,.pricing-card[data-bg] > *{position:relative;z-index:1}
.card-pricing[data-bg="guest"]::before,.pricing-card[data-bg="guest"]::before{background-image:url('/images/bg-price-guest.png')}
.card-pricing[data-bg="basic"]::before,.pricing-card[data-bg="basic"]::before{background-image:url('/images/bg-price-basic.png')}
.card-pricing[data-bg="premium"]::before,.pricing-card[data-bg="premium"]::before{background-image:url('/images/bg-price-premium.png')}
.card-pricing[data-bg="creator"]::before,.pricing-card[data-bg="creator"]::before{background-image:url('/images/bg-price-creator.png')}
/* /premium and /creator main featured cards use the larger high-res
   photographic backgrounds (Figma 3328:9774 + creator equivalent).
   Slightly darker overlay than the homepage tier tiles to keep the
   denser body copy readable. */
.card-pricing[data-bg="page-premium"]::before{background-image:url('/images/bg-premium.png')}
.card-pricing[data-bg="page-creator"]::before{background-image:url('/images/bg-creator.png')}
.card-pricing[data-bg="page-premium"]::before,.card-pricing[data-bg="page-creator"]::before{opacity:0.5}
.card-pricing[data-bg="page-premium"]::after,.card-pricing[data-bg="page-creator"]::after{background:linear-gradient(180deg,rgba(22,26,28,0.55),rgba(22,26,28,0.92))}