/* Forced mobile layout — html.landing-mobile set in before paint */
html.landing-mobile,
html.landing-mobile body {
overflow-x: clip !important;
max-width: 100% !important;
}
html.landing-mobile body {
padding-top: 68px !important;
}
html.landing-mobile body.nav-open {
overflow: hidden !important;
}
html.landing-mobile .container {
width: min(calc(100% - 20px), var(--max)) !important;
max-width: 100% !important;
}
html.landing-mobile .navbar {
padding: 10px 0 !important;
z-index: 1000 !important;
}
html.landing-mobile .nav-frame {
position: relative !important;
z-index: 1200 !important;
}
html.landing-mobile .nav-glass {
position: relative !important;
z-index: 1200 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas: "brand toggle" !important;
align-items: center !important;
gap: 8px !important;
border-radius: 20px !important;
padding: 8px 10px 8px 12px !important;
}
html.landing-mobile .brand {
grid-area: brand !important;
min-width: 0 !important;
}
html.landing-mobile .brand-logo {
width: 36px !important;
height: 36px !important;
}
html.landing-mobile .nav-workspace-cta {
grid-area: cta !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 12px !important;
font-size: 0.82rem !important;
color: var(--text) !important;
background: rgba(255, 255, 255, 0.72) !important;
border: 1px solid rgba(51, 37, 22, 0.1) !important;
white-space: nowrap !important;
}
html.landing-mobile .nav-toggle {
grid-area: toggle !important;
display: inline-flex !important;
}
html.landing-mobile .nav-backdrop {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 100 !important;
background: rgba(28, 22, 16, 0.16) !important;
backdrop-filter: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html.landing-mobile .navbar.is-menu-open .nav-backdrop,
html.landing-mobile body.nav-open .nav-backdrop {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
html.landing-mobile .nav-menu {
position: fixed !important;
top: 72px !important;
left: 10px !important;
right: 10px !important;
z-index: 1300 !important;
flex: none !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
padding: 12px !important;
border-radius: 20px !important;
background: #fffaf2 !important;
border: 1px solid rgba(51, 37, 22, 0.18) !important;
box-shadow: 0 24px 70px rgba(28, 22, 16, 0.32) !important;
color: #171717 !important;
min-height: 220px !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-8px) scale(0.98) !important;
pointer-events: none !important;
}
html.landing-mobile .navbar.is-menu-open .nav-menu,
html.landing-mobile body.nav-open .nav-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) scale(1) !important;
pointer-events: auto !important;
}
html.landing-mobile .nav-links {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
font-size: 1rem !important;
}
html.landing-mobile .nav-links a {
display: block !important;
padding: 13px 12px !important;
border-radius: 12px !important;
color: #171717 !important;
background: #fffaf2 !important;
font-weight: 800 !important;
}
html.landing-mobile .nav-links a:hover,
html.landing-mobile .nav-links a:focus-visible {
background: #fff0db !important;
}
html.landing-mobile .nav-auth {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
margin-top: 8px !important;
padding-top: 10px !important;
border-top: 1px solid rgba(51, 37, 22, 0.1) !important;
}
html.landing-mobile .nav-login,
html.landing-mobile .nav-signup {
width: 100% !important;
justify-content: center !important;
color: #171717 !important;
}
html.landing-mobile .nav-login {
background: #ffffff !important;
border: 1px solid rgba(51, 37, 22, 0.18) !important;
}
html.landing-mobile .nav-signup {
color: #ffffff !important;
background: #151515 !important;
border-color: #151515 !important;
}
html.landing-mobile .nav-lang-picker--mobile {
display: block !important;
grid-area: lang !important;
width: auto !important;
}
html.landing-mobile .nav-lang-picker--desktop {
display: none !important;
}
html.landing-mobile .nav-glass {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
grid-template-areas: "brand lang toggle" !important;
align-items: center !important;
gap: 8px !important;
}
html.landing-mobile .nav-lang-trigger {
width: auto !important;
justify-content: center !important;
padding: 8px 10px !important;
font-size: 0.82rem !important;
}
html.landing-mobile .nav-lang-menu {
left: auto !important;
right: 0 !important;
min-width: 160px !important;
}
html.landing-mobile .hero-lead {
display: none !important;
}
html.landing-mobile .hero-stacked {
padding-top: 12px !important;
}
html.landing-mobile .hero-top {
max-width: 100% !important;
margin-bottom: 18px !important;
padding-inline: 2px !important;
}
html.landing-mobile .hero-top::before {
inset: -44px -18px -32px !important;
}
html.landing-mobile .hero-ai-badge {
margin-bottom: 12px !important;
font-size: 0.72rem !important;
}
html.landing-mobile .hero-title {
max-width: 100% !important;
font-size: clamp(2.25rem, 11.8vw, 3.55rem) !important;
line-height: 0.94 !important;
}
html.landing-mobile .hero-title span {
color: #f97316 !important;
}
html.landing-mobile .hero-subhead {
max-width: 32rem !important;
margin-top: 12px !important;
font-size: clamp(1rem, 4.7vw, 1.28rem) !important;
line-height: 1.38 !important;
}
html.landing-mobile .hero-proof-pills {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
max-width: 360px !important;
margin: 20px auto 0 !important;
}
html.landing-mobile .hero-proof-pills span {
min-width: 0 !important;
min-height: 58px !important;
padding: 10px 8px !important;
border-radius: 16px !important;
}
html.landing-mobile .hero-proof-pills strong,
html.landing-mobile .hero-proof-pills em {
max-width: 100% !important;
overflow-wrap: anywhere !important;
text-align: center !important;
}
html.landing-mobile .hero-stacked .hero-actions {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html.landing-mobile .workspace-benefit-layout {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html.landing-mobile .workspace-benefit-copy h2 {
max-width: none !important;
}
html.landing-mobile .workspace-benefit-board {
padding: 14px 12px 12px !important;
}
html.landing-mobile .hero-stacked .hero-actions {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
html.landing-mobile .hero-stacked .hero-actions .button {
width: 100% !important;
}
html.landing-mobile .hero-stacked .hero-actions .button-secondary {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
html.landing-mobile .product-showcase {
width: 100% !important;
max-width: 100% !important;
}
html.landing-mobile .showcase-tabs,
html.landing-mobile .showcase-progress,
html.landing-mobile .showcase-shine,
html.landing-mobile .showcase-frame iframe,
html.landing-mobile #workspace-showcase {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
html.landing-mobile .showcase-frame {
border-radius: 16px !important;
overflow: hidden !important;
background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(255, 241, 214, 0.88)) !important;
box-shadow: 0 16px 40px rgba(77, 50, 18, 0.12) !important;
height: auto !important;
min-height: 0 !important;
}
html.landing-mobile .showcase-mobile-fallback {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 16px !important;
}
html.landing-mobile .candidacy-track {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 10px !important;
}
html.landing-mobile .candidacy-connector {
display: none !important;
}
html.landing-mobile .candidacy-node {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
min-height: 0 !important;
padding: 12px 14px !important;
text-align: left !important;
}
html.landing-mobile .candidacy-step-no,
html.landing-mobile .candidacy-hint {
display: none !important;
}
html.landing-mobile .why-showcase,
html.landing-mobile .result-layout,
html.landing-mobile .hero {
display: block !important;
grid-template-columns: none !important;
}
html.landing-mobile .why-showcase {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
html.landing-mobile .result-layout {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
html.landing-mobile .pricing-grid,
html.landing-mobile .pricing-grid.pricing-grid-duo {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
grid-template-columns: none !important;
overflow: visible !important;
}
html.landing-mobile .pricing-card {
width: 100% !important;
flex: none !important;
max-width: 100% !important;
}
html.landing-mobile .section {
padding: 36px 0 !important;
}
html.landing-mobile .disclosure-inner {
flex-direction: column !important;
align-items: stretch !important;
}
html.landing-mobile .disclosure-inner .button {
width: 100% !important;
}
@media (max-width: 480px) {
html.landing-mobile .brand-copy {
display: none !important;
}
html.landing-mobile body {
padding-top: 62px !important;
}
html.landing-mobile .nav-workspace-cta {
padding: 8px 10px !important;
font-size: 0.78rem !important;
}
}