.marketing-page {
  --bg: #fff; --surface: #fff; --subtle: #f4f4f5; --text: #171719;
  --muted: #55555f; --line: #e5e5e8; --accent: #5120bf; --accent-hover: #39158b;
  --tint: #eee4ff; --check: #eeeef1; --action-hover: #29292d; --error: #b42139;
  --cyan: #98eafa; --pink: #ffc2db; --lime: #edffd0; --violet: #5120bf;
  --radius: 3px; color-scheme: light; background: var(--bg);
}
.marketing-page .shell {max-width: 1184px; padding-inline: 40px}
.marketing-page h1,.marketing-page h2,.marketing-page h3 {font-weight: 700; letter-spacing: -.055em}
.marketing-page .button {border-radius: 3px; font-size: 12px; min-height: 38px; padding: 10px 16px}
.marketing-page .primary {background: var(--text); border-color: var(--text); color: var(--surface)}
.marketing-page .primary:hover {background: var(--accent); border-color: var(--accent)}
.marketing-banner {background: var(--accent-hover); color: var(--surface); text-align: center; font-size: 10px; padding: 5px 16px}
.marketing-banner a {color: inherit; margin-left: 12px}
.marketing-page .site-header {background: var(--cyan); border: 0}
.marketing-page .header-row {max-width: 1600px; min-height: 78px; gap: 24px}
.marketing-page .brand {font-size: 27px; letter-spacing: -1.4px}
.marketing-page .brand img {filter: brightness(0)}
.marketing-page .nav {border: 0; padding: 0; gap: 24px; min-height: auto; margin: 0; width: auto}
.marketing-page .nav a:not(.button) {font-size: 12px; color: var(--text); padding: 8px 0}
.marketing-page main {overflow: clip}
.marketing-page main.shell {max-width: none; padding: 0}
.marketing-page main > * {max-width: 1104px; margin-inline: auto}
.marketing-page .hero {max-width: none; background: var(--cyan); padding: 85px max(40px,calc((100vw - 1104px)/2)) 100px; grid-template-columns: 1.2fr .8fr; gap: 80px; position: relative; isolation: isolate}
.marketing-page .hero h1 {font-size: clamp(54px,5.8vw,84px); line-height: .96; letter-spacing: -.065em}
.marketing-page .hero p {color: var(--text); max-width: 39ch; font-size: 16px}
.marketing-page .hero .eyebrow {font-size: 11px; margin-top: 0}
.marketing-page .hero .micro {color: var(--text)}
.marketing-page .hero:before,.marketing-page .page-head:after {content: ''; position: absolute; width: 170px; height: 170px; background: repeating-conic-gradient(var(--violet) 0 25%,transparent 0 50%) 0 / 14px 14px; clip-path: polygon(40% 0,60% 0,60% 30%,100% 30%,100% 50%,65% 50%,90% 90%,70% 100%,50% 65%,30% 100%,10% 90%,35% 50%,0 50%,0 30%,40% 30%); right: -60px; top: 25px; z-index: -1; transform: rotate(-15deg)}
.marketing-page .compare-frame {padding: 0; background: transparent; border: 0; transform: rotate(3deg); border-radius: 0; position: relative}
.marketing-page .compare-frame:before {content: ''; width: 110px; height: 22px; background: var(--lime); position: absolute; top: -10px; left: 33%; transform: rotate(-12deg); z-index: 2}
.marketing-page .comparison {border-radius: 2px; aspect-ratio: .9; background-color: var(--surface)}
.marketing-page .compare-labels {color: var(--text); font-size: 11px}
.marketing-page .strip {padding: 28px 0; font-size: 12px; font-weight: 600; border-top: 0}
.marketing-page .section {padding-block: 100px}
.marketing-page .section-head {max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 100px; margin-bottom: 48px}
.marketing-page .section-head .eyebrow {grid-column: 1 / -1}
.marketing-page .section-head h2 {font-size: 44px; max-width: 16ch}
.marketing-page .section-head > p:last-child {align-self: end; max-width: 42ch; font-size: 15px}
.marketing-page .feature-row {display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding: 30px; margin-top: 8px; border: 0; background: var(--subtle)}
.marketing-page .feature-row:nth-of-type(2) {background: var(--tint)}
.marketing-page .feature-row:nth-of-type(3) {background: var(--cyan)}
.marketing-page .feature-row:nth-of-type(4) {background: var(--lime)}
.marketing-page .feature-row h3 {font-size: 26px; margin: 12px 0 0}
.marketing-page .feature-row p {margin: 0; align-self: center}
.marketing-page .number,.marketing-page .eyebrow {color: var(--text)}
.marketing-page .callout {background: var(--violet); border: 0; border-radius: 4px; padding: 65px; color: var(--surface); position: relative; overflow: hidden}
.marketing-page .callout p,.marketing-page .callout .eyebrow {color: var(--surface)}
.marketing-page .callout .primary {background: var(--surface); color: var(--text); border-color: var(--surface)}
.marketing-page .callout h2 {font-size: 46px}
.marketing-page .plans {gap: 12px}
.marketing-page .plan {background: var(--subtle); border: 0; border-radius: 2px; padding: 26px}
.marketing-page .plan.featured {background: var(--tint)}
.marketing-page .plan .badge {background: transparent; color: var(--muted); padding: 0; font-size: 10px}
.marketing-page .plan .price {font-size: 42px; letter-spacing: -.05em}
.marketing-page .plan ul {font-size: 13px}
.marketing-page .page-head {max-width: none; text-align: center; background: var(--cyan); padding: 70px 24px 80px; margin-bottom: 70px; position: relative; isolation: isolate}
.marketing-page .page-head h1 {font-size: clamp(42px,5vw,66px); max-width: 850px; margin-inline: auto; line-height: 1.02}
.marketing-page .page-head p {margin-inline: auto; max-width: 52ch; color: var(--text)}
.marketing-pricing .page-head,.marketing-pricing .site-header {background: var(--pink)}
.marketing-page .prose {max-width: 780px; padding-bottom: 80px}
.marketing-page .prose h2 {font-size: 29px; margin-top: 45px}
.marketing-page .steps {padding-top: 0; gap: 12px}
.marketing-page .step {border: 0; border-radius: 2px; padding: 32px; background: var(--tint)}
.marketing-page .step:nth-child(2) {background: var(--cyan)}
.marketing-page .step:nth-child(3) {background: var(--lime)}
.marketing-page .faq {max-width: 780px}
.marketing-page .site-footer {background: var(--cyan); border: 0; margin-top: 70px; padding: 55px 0 24px; overflow: hidden}
.marketing-page .site-footer .shell {max-width: 1440px}
.marketing-page .footer-links a,.marketing-page .footer-grid p,.marketing-page .footer-bottom {color: var(--text)}
.marketing-page .footer-links a:hover {text-decoration: underline}
.marketing-page .footer-grid:after {content: 'outlayered'; grid-column: 1 / -1; text-align: right; font-size: clamp(65px,16vw,235px); line-height: 1; font-weight: 700; letter-spacing: -.075em; margin-top: 60px}
.marketing-login .site-header,.marketing-signup .site-header {background: var(--surface)}
.marketing-page .auth-layout {max-width: none; min-height: 780px; gap: 0; grid-template-columns: 1fr 1fr; padding: 0; position: relative}
.marketing-page .auth-intro {grid-column: 2; grid-row: 1; height: 100%; padding: 100px 60px; display: flex; flex-direction: column; justify-content: end; background: var(--pink); background-image: repeating-conic-gradient(from 30deg,var(--cyan) 0 25%,transparent 0 50%); background-size: 90px 90px}
.marketing-page .auth-intro h1,.marketing-page .auth-intro p {background: var(--pink); padding: 12px; margin: 0; color: var(--text)}
.marketing-page .auth-intro h1 {font-size: 56px}
.marketing-page .auth-layout .form-panel {grid-column: 1; grid-row: 1; margin: 80px auto; max-width: 390px; border: 0; padding: 24px}
.marketing-page .auth-layout .form-panel h2 {font-size: 32px}
.marketing-page .field input {min-height: 46px}
@media(max-width: 1150px) {
 .marketing-page main > :not(.hero):not(.page-head):not(.auth-layout) {margin-inline: 32px}
 .marketing-page .nav {gap: 15px}
 .marketing-page .header-row {padding-inline: 24px}
 .marketing-page .hero {gap: 40px}
}
@media(max-width: 760px) {
 .marketing-page .shell {padding-inline: 20px}
 .marketing-page .header-row {flex-wrap: wrap; min-height: 70px; padding-block: 15px}
 .marketing-page .nav {width: 100%; padding-top: 16px; flex-wrap: wrap; gap: 16px}
 .marketing-page .hero {grid-template-columns: 1fr; padding: 48px 24px 55px; gap: 45px}
 .marketing-page .hero h1 {font-size: clamp(47px,10vw,70px)}
 .marketing-page .hero .actions {flex-direction: row; align-items: center}
 .marketing-page .hero .button {width: auto}
 .marketing-page .compare-frame {max-width: 370px; width: 90%; margin: auto}
 .marketing-page main > :not(.hero):not(.page-head):not(.auth-layout) {margin-inline: 24px}
 .marketing-page .strip {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 11px}
 .marketing-page .section {padding-block: 60px}
 .marketing-page .section-head,.marketing-page .feature-row {grid-template-columns: 1fr; gap: 16px}
 .marketing-page .section-head h2 {font-size: 36px}
 .marketing-page .callout {padding: 35px 25px}
 .marketing-page .callout h2 {font-size: 36px}
 .marketing-page .page-head {padding-block: 50px; margin-bottom: 40px}
 .marketing-page .plans {grid-template-columns: 1fr}
 .marketing-page .auth-layout {grid-template-columns: 1fr; min-height: auto}
 .marketing-page .auth-layout .form-panel {grid-row: 1; margin-block: 45px}
 .marketing-page .auth-intro {grid-column: 1; grid-row: 2; padding: 50px 24px; min-height: 330px}
 .marketing-page .auth-intro h1 {font-size: 40px}
 .marketing-page .footer-grid {grid-template-columns: 1fr 1fr}
 .marketing-page .footer-grid:after {margin-top: 30px}
}
@media(max-width: 760px) {
 .marketing-page .hero:before,.marketing-page .page-head:after {width: 85px; height: 85px; right: -28px; top: 10px; background-size: 9px 9px}
}