/* muahaus.com, the closed-beta landing (worker/platform/landing.ts). MuaHaus's own palette, the same in light and
   dark (a brand page, not an app): warm black first screen and band, cream and paper sections, dusty rose for the
   one accent. Gothic A1 throughout, uppercase spaced labels like the rest of MuaHaus. */
.l-body {
  --l-night: #0f0c0a; --l-ink: #16120f; --l-ink-2: #4a443e; --l-mute: #7a736b; --l-cream: #f6f1ea; --l-paper: #fbf8f4;
  --l-line: #e4dccf; --l-rose: #b76e79; --l-rose-ink: #a7535f; --l-rose-2: #8e4450; --l-on-dark: #f6f1ea; --l-on-dark-2: #b9b2a8;
  display: block; background: var(--l-paper); color: var(--l-ink); font: 500 17px/1.6 var(--font); color-scheme: light;
}
.l-body * { box-sizing: border-box; }
.l-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--l-cream); color: var(--l-ink); padding: 10px 14px; }
.l-skip:focus { left: 8px; }
.l-body :focus-visible { outline: 2px solid var(--l-rose); outline-offset: 3px; }

/* ---- header: over the dark first screen ---- */
.l-top { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: 24px clamp(20px, 4vw, 56px); color: var(--l-on-dark); }
.l-mark { display: inline-flex; color: inherit; line-height: 0; }
.l-mark .k-logo { height: 20px; width: auto; }
.l-nav { display: flex; gap: 28px; margin-left: 24px; }
.l-nav a, .l-signin, .l-lang { color: var(--l-on-dark-2); text-decoration: none; font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; padding: 14px 0; transition: color .2s; }
.l-nav a:hover, .l-signin:hover, .l-lang:hover { color: var(--l-on-dark); }
.l-top-end { margin-left: auto; display: flex; align-items: center; gap: 22px; }

/* ---- buttons ---- */
.l-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid var(--l-rose); background: var(--l-rose); color: #fff;
  font: 700 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.l-btn:hover { background: var(--l-rose-ink); border-color: var(--l-rose-ink); }
.l-btn:active { transform: translateY(1px); }
.l-btn-sm { min-height: 42px; padding: 0 20px; font-size: 11px; }
.l-btn-ghost { background: transparent; border-color: rgba(246, 241, 234, .4); color: var(--l-on-dark); }
.l-btn-ghost:hover { background: rgba(246, 241, 234, .08); border-color: var(--l-on-dark); }
.l-btn-full { width: 100%; }
.l-btn[disabled] { opacity: .55; cursor: wait; }

/* ---- the first screen ---- */
.l-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(100vh, 980px);
  padding: 140px clamp(20px, 4vw, 56px) 90px; background: radial-gradient(120% 90% at 85% 30%, #2a201c 0%, var(--l-night) 60%); color: var(--l-on-dark); overflow: hidden; }
.l-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid rgba(183, 110, 121, .55); border-radius: 999px; background: rgba(183, 110, 121, .12);
  font: 700 11px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: #e3b3bb; }
.l-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--l-rose); box-shadow: 0 0 0 4px rgba(183, 110, 121, .25); }
.l-hero h1 { margin: 28px 0 0; font: 600 clamp(42px, 6vw, 84px)/1.02 var(--font); letter-spacing: -.035em; text-transform: none; color: var(--l-on-dark); }
.l-hero h1 em { font-style: normal; color: var(--l-rose); }
.l-lede { margin-top: 26px; max-width: 560px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--l-on-dark-2); }
.l-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.l-small { margin-top: 18px; font-size: 14px; color: var(--l-mute); }
.l-hero .l-small { color: #8f877c; }
.l-hero-art { position: relative; height: min(76vh, 720px); min-height: 460px; }
.l-hero-art img { position: absolute; display: block; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
.l-h1 { right: 4%; top: 0; width: 62%; height: 86%; }
.l-h2 { left: 0; bottom: 0; width: 40%; height: 58%; filter: brightness(.92); }
.l-chip { position: absolute; display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: rgba(251, 248, 244, .96); color: var(--l-ink); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7); }
.l-chip b { font: 700 13px/1.2 var(--font); display: flex; align-items: center; gap: 8px; }
.l-chip b::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #1f7a43 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.l-chip span { font-size: 12px; color: var(--l-mute); font-variant-numeric: tabular-nums; }
.l-chip-pay { left: 30%; top: 12%; }
.l-chip-team { right: 0; bottom: 6%; }

/* ---- what's included ---- */
.l-facts { list-style: none; margin: 0; padding: 22px clamp(20px, 4vw, 56px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; background: var(--l-ink); color: var(--l-on-dark-2);
  font: 700 11px/1.4 var(--font); letter-spacing: .16em; text-transform: uppercase; border-top: 1px solid #2b2622; }
.l-facts li { display: flex; align-items: center; gap: 10px; }
.l-facts li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--l-rose); }

/* ---- sections ---- */
.l-section { padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 56px); max-width: 1320px; margin: 0 auto; }
.l-sec-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 88px); }
.l-eyebrow { font: 700 12px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--l-rose-ink); margin: 0 0 18px; }
.l-section h2, .l-access h2 { margin: 0; font: 600 clamp(34px, 4.4vw, 60px)/1.05 var(--font); letter-spacing: -.03em; text-transform: none; color: var(--l-ink); }
.l-sec-head > p:last-child:not(.l-eyebrow) { margin-top: 22px; font-size: 19px; color: var(--l-ink-2); max-width: 640px; }

.l-feature { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.l-feature + .l-feature { margin-top: clamp(80px, 10vw, 140px); }
.l-feature.l-flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.l-feature.l-flip .l-feature-copy { order: 2; }
.l-num { font: 600 14px/1 var(--font); color: var(--l-rose-ink); letter-spacing: .1em; margin: 0 0 18px; }
.l-feature h3 { margin: 0; font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--font); letter-spacing: -.02em; text-transform: none; }
.l-feature-copy > p:not(.l-num) { margin-top: 18px; color: var(--l-ink-2); font-size: 17px; line-height: 1.65; }
.l-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.l-points li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; font-weight: 600; color: var(--l-ink); }
.l-points li::before { content: ''; flex: none; width: 18px; height: 1.5px; background: var(--l-rose); transform: translateY(-4px); }

/* device frames around the real screens */
.l-visual { position: relative; }
.l-desk { margin: 0; border-radius: 12px; overflow: hidden; background: #0b0b0b; box-shadow: 0 40px 90px -40px rgba(22, 18, 15, .55), 0 0 0 1px rgba(22, 18, 15, .08); }
.l-desk-bar { display: flex; gap: 7px; padding: 12px 14px; background: #1c1916; }
.l-desk-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a342f; }
.l-desk img { display: block; width: 100%; height: auto; }
.l-phone { margin: 0; width: min(300px, 64%); padding: 10px; border-radius: 42px; background: #0d0b09; box-shadow: 0 40px 80px -30px rgba(22, 18, 15, .6), inset 0 0 0 1px #2b2622; }
.l-phone-screen { border-radius: 33px; overflow: hidden; aspect-ratio: 390 / 760; background: #000; }
.l-phone-screen img { display: block; width: 100%; height: auto; }
.l-visual-pagina { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px) 0; }
.l-visual-pagina .l-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; filter: brightness(.82); }
.l-visual-pagina .l-phone { position: relative; }
.l-visual-equipo { padding-bottom: 60px; }
.l-visual-equipo .l-desk { width: 88%; }
.l-phone-float { position: absolute; right: 0; bottom: 0; width: min(210px, 34%); padding: 8px; border-radius: 32px; }
.l-phone-float .l-phone-screen { border-radius: 25px; }

/* the band */
.l-band { position: relative; min-height: clamp(420px, 56vw, 720px); display: flex; align-items: flex-end; overflow: hidden; background: var(--l-night); }
.l-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.l-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 12, 10, 0) 35%, rgba(15, 12, 10, .85) 100%); }
.l-band p { position: relative; z-index: 1; margin: 0; padding: 0 clamp(20px, 4vw, 56px) clamp(40px, 6vw, 80px); font: 600 clamp(30px, 4.4vw, 60px)/1.08 var(--font); letter-spacing: -.03em; color: var(--l-on-dark); max-width: 1100px; }

/* freelancers */
.l-freelance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.l-free-art { position: relative; min-height: 560px; }
.l-free-photo { display: block; width: 70%; height: 520px; object-fit: cover; border-radius: 8px; }
.l-phone-free { position: absolute; right: 2%; bottom: -10px; width: min(250px, 46%); }
.l-free-copy > p:not(.l-eyebrow):not(.l-small) { margin-top: 22px; font-size: 18px; color: var(--l-ink-2); line-height: 1.65; }
.l-freelance .l-small { color: var(--l-mute); }

/* the beta, in three steps */
.l-beta { background: transparent; }
.l-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.l-steps li { counter-increment: s; display: grid; gap: 10px; align-content: start; padding: 30px 28px 32px; border-radius: 16px; background: var(--l-cream); border: 1px solid var(--l-line); }
.l-steps li::before { content: counter(s, decimal-leading-zero); font: 600 15px/1 var(--font); color: var(--l-rose-ink); letter-spacing: .1em; margin-bottom: 14px; }
.l-steps b { font: 600 22px/1.2 var(--font); letter-spacing: -.01em; }
.l-steps span { color: var(--l-ink-2); font-size: 16px; line-height: 1.6; }

/* request access */
.l-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--l-night); scroll-margin-top: 0; }
.l-access-art { position: relative; min-height: 520px; }
.l-access-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.l-access-card { background: var(--l-cream); padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 80px); }
.l-access-card > p:not(.l-eyebrow):not(.l-have) { margin-top: 16px; color: var(--l-ink-2); font-size: 17px; }
#l-form { display: grid; gap: 16px; margin-top: 32px; }
#l-form[hidden] { display: none; }
.l-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.l-field { display: grid; gap: 7px; }
.l-field span { font: 700 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--l-ink-2); }
.l-field input, .l-field select, .l-field textarea { width: 100%; min-width: 0; padding: 14px 16px; border: 1px solid #d6cdbf; border-radius: 10px; background: #fff; color: var(--l-ink); font: 500 16px/1.4 var(--font); appearance: none; }
.l-field select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a736b' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center / 12px no-repeat; padding-right: 40px; }
.l-field textarea { resize: vertical; }
.l-field input:focus, .l-field select:focus, .l-field textarea:focus { outline: 2px solid var(--l-ink); outline-offset: -1px; border-color: var(--l-ink); }
.l-field [aria-invalid="true"] { border-color: #b3261e; }
.l-field .l-err { font: 500 13px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: #b3261e; }
.l-fine { font-size: 13px; color: var(--l-mute); margin: 0; }
.l-fine a, .l-have a { color: var(--l-ink); }
.l-have { margin-top: 26px; font-size: 15px; color: var(--l-ink-2); }
.l-msg:empty { display: none; }
.l-msg { margin-top: 24px; padding: 18px 20px; border-radius: 12px; font-size: 16px; line-height: 1.55; }
.l-msg.l-bad { background: #fbe8e6; color: #8f1d17; }
.l-msg.l-ok { background: #fff; border: 1px solid var(--l-line); }
.l-msg.l-ok b { display: block; font: 600 22px/1.25 var(--font); letter-spacing: -.01em; margin-bottom: 8px; color: var(--l-ink); }

/* questions */
.l-faq { max-width: 960px; }
.l-faq .l-sec-head { margin-bottom: 32px; }
.l-faq-list details { border-top: 1px solid var(--l-line); }
.l-faq-list details:last-child { border-bottom: 1px solid var(--l-line); }
.l-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font: 600 20px/1.3 var(--font); letter-spacing: -.01em; }
.l-faq-list summary::-webkit-details-marker { display: none; }
.l-faq-list summary::after { content: '+'; font-weight: 500; color: var(--l-rose-ink); transition: transform .2s; }
.l-faq-list details[open] summary::after { transform: rotate(45deg); }
.l-faq-list p { margin: -6px 0 24px; max-width: 720px; color: var(--l-ink-2); font-size: 17px; }

/* footer */
.l-foot { background: var(--l-ink); color: var(--l-on-dark-2); padding: 56px clamp(20px, 4vw, 56px) 40px; }
.l-foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding-bottom: 32px; border-bottom: 1px solid #2b2622; }
.l-foot .l-mark { color: var(--l-on-dark); }
.l-foot-top > p { margin: 0; font: 700 11px/1.4 var(--font); letter-spacing: .18em; text-transform: uppercase; }
.l-foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.l-foot nav a { color: var(--l-on-dark); text-decoration: none; font-size: 14px; padding: 10px 0; }
.l-foot nav a:hover { color: var(--l-rose); }
.l-credits { margin: 20px 0 0; font-size: 12px; line-height: 1.6; color: #8f877c; max-width: 820px; }

/* ---- tablets ---- */
@media (max-width: 1080px) {
  .l-nav { display: none; }
  .l-hero { grid-template-columns: 1fr; padding-top: 130px; min-height: 0; }
  .l-hero-art { height: 560px; max-width: 640px; width: 100%; justify-self: center; }
  .l-feature, .l-feature.l-flip, .l-freelance { grid-template-columns: 1fr; }
  .l-feature.l-flip .l-feature-copy { order: 0; }
  .l-feature-copy { max-width: 640px; }
  .l-free-art { max-width: 560px; }
}
/* ---- phones ---- */
@media (max-width: 720px) {
  .l-body { font-size: 16px; }
  .l-top { padding: 16px 20px; gap: 12px; }
  .l-mark .k-logo { height: 16px; }
  .l-top-end { gap: 14px; }
  .l-signin { display: none; }
  .l-btn-sm { min-height: 40px; padding: 0 16px; }
  .l-lang { padding: 13px 4px; }
  .l-hero { padding: 104px 20px 64px; gap: 44px; }
  .l-hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .l-ctas .l-btn { flex: 1 1 100%; }
  .l-hero-art { height: 440px; min-height: 0; }
  .l-h1 { width: 68%; height: 82%; right: 0; }
  .l-h2 { width: 44%; height: 50%; }
  .l-chip { padding: 11px 14px; border-radius: 12px; }
  .l-chip-pay { left: 18%; top: 6%; }
  .l-chip-team { bottom: 2%; }
  .l-facts { justify-content: flex-start; gap: 10px 22px; padding: 18px 20px; }
  .l-section { padding: 72px 20px; }
  .l-visual-equipo .l-desk { width: 100%; }
  .l-visual-equipo { padding-bottom: 120px; }
  .l-phone-float { width: 40%; right: 4%; }
  .l-free-art { min-height: 0; padding-bottom: 40px; }
  .l-free-photo { width: 78%; height: 420px; }
  .l-phone-free { width: 48%; bottom: 0; }
  .l-steps { grid-template-columns: 1fr; }
  .l-access { grid-template-columns: 1fr; }
  .l-access-art { min-height: 220px; }
  .l-access-card { padding: 44px 20px 56px; }
  .l-grid2 { grid-template-columns: 1fr; }
  .l-faq-list summary { font-size: 18px; }
  .l-foot nav { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .l-btn, .l-faq-list summary::after { transition: none; } }