/* Manifolio landing (manifolio.com), mirrors r05 section by section. Values are CSS px at 1440. */

html { scroll-behavior: smooth; }
body.lp { background: var(--panel); color: var(--text-1); overflow-x: hidden; }
.lp img { max-width: 100%; }
.lp picture { display: contents; }
.lp-skip { position: fixed; left: 1rem; top: -3.75rem; z-index: 100; height: 2.75rem; padding: 0 1rem; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: #FFF; color: var(--text-1); font-size: max(13px, .875rem); font-weight: 500; transition: transform 200ms var(--ease-out); }
.lp-skip:focus { transform: translateY(4.75rem); }

.lp-wrap { width: 100%; margin: 0 auto; padding-inline: max(2rem, calc(50% - 38.75rem)); }
.lp-sec { position: relative; padding: 7.5rem 0; }
.lp-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 3.75rem; }
.lp-h2 { font-size: 3.75rem; line-height: 4.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
.lp-head .eyebrow + .lp-h2 { margin-top: 1rem; }
.lp-lead { margin-top: 1.25rem; max-width: 32.5rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-1); text-wrap: pretty; }

/* scroll-in motion: a longer, softer rise than the app */
.mf-js .lp [data-reveal] { transform: translateY(1.25rem); }
.mf-js .lp [data-reveal].is-in { transform: none; transition: opacity 700ms var(--ease-out) var(--rd, 0ms), transform 800ms var(--ease-out) var(--rd, 0ms); }
.mf-js .lp [data-reveal="frame"] { transform: translateY(1.5rem); }
.mf-js .lp [data-reveal="frame"].is-in { transition: opacity 700ms var(--ease-out) 240ms, transform 900ms var(--ease-out) 240ms; }

/* ── nav (ref nav_logo_3x, nav_links_3x, nav_login_signup_3x) ── */
.lp-nav { position: fixed; z-index: var(--z-fab); left: 0; right: 0; top: 0; height: 4.5rem; pointer-events: none; }
.lp-nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4.5rem; pointer-events: auto;
  background: rgba(68,20,6,.94); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.lp-nav-in { position: relative; display: flex; align-items: center; justify-content: space-between; height: 4.5rem; padding: 0 max(2rem, calc(50% - 38.75rem)); }
.lp-nav a, .lp-nav button { pointer-events: auto; }
.lp-logo { height: 2.75rem; }
.lp-links { position: absolute; left: 50%; top: 50%; display: flex; gap: 2.5rem; transform: translate(-50%, -50%); }
.lp-links a { position: relative; padding: .625rem 0; font-size: 1rem; line-height: 1.5rem; color: #FFF; transition: color var(--d-hover) var(--ease-out); }
.lp-links.has-active a { color: rgba(255,255,255,.72); }
.lp-links a:hover, .lp-links.has-active a.is-active { color: #FFF; }
.lp-links a::after { content: ""; position: absolute; left: 50%; bottom: .25rem; width: .25rem; height: .25rem; margin-left: -2px; border-radius: 50%; background: var(--orange); opacity: 0; transform: scale(.4); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.lp-links a.is-active::after { opacity: 1; transform: none; }
.lp-nav-r { display: flex; align-items: center; }
.lp-login { display: inline-flex; align-items: center; height: 2.75rem; margin-right: 1.25rem; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; color: #FFF; transition: opacity var(--d-hover) var(--ease-out); }
.lp-login:hover { opacity: .8; }
.lp-signup.btn-white { height: 2.75rem; padding: 0 1.25rem; }
.lp-menu { display: none; }

/* ── hero (ref sec_hero_native, hero_badge_3x, hero_ctas_3x, frame_topleft_corner_3x) ── */
.lp-hero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 10.75rem; background: var(--maroon-landing); }
.lp-hero .tx-grid svg { transform: translate3d(-50%, var(--py, 0px), 0); will-change: transform; }
.hero-in { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 1rem; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; height: 2.125rem; padding: 0 .875rem; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.06); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: rgba(255,255,255,.95); white-space: nowrap; }
.hb-ic { display: inline-flex; color: var(--orange); }
.hb-ic svg { width: 1rem; height: 1rem; }
.hero-h1 { margin-top: 1rem; max-width: 56.25rem; font-size: 4.5rem; line-height: 5.5rem; font-weight: 600; letter-spacing: -0.02em; color: #FFF; }
.hero-h1 .hl { display: block; }
.hero-sub { margin-top: 1.5625rem; max-width: 35rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; color: #FFF; text-wrap: balance; }
.hero-ctas { display: flex; gap: 1.25rem; margin-top: 1.875rem; }
.lp-cta-primary.btn-primary { padding: 0 1.25rem; background-color: var(--orange); background-image: var(--grad-cta-hero); }
.lp-cta-primary.btn-primary:hover { background-color: var(--orange); box-shadow: inset 0 0 0 100px rgba(120,40,0,.10); }
.hero-ctas .btn-white { padding: 0 1.25rem; }
.lp-hero .btn-white, .lp-signup.btn-white { background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%); }
.lp-hero .btn-white:hover, .lp-signup.btn-white:hover { box-shadow: inset 0 0 0 100px rgba(0,0,0,.04); }

.hero-frame { position: relative; width: 69.5rem; max-width: calc(100% - 4rem); margin: 5.25rem 0 -18.5rem; padding: 1rem; border-radius: 2.25rem; background: rgba(255,255,255,.10); box-shadow: var(--sh-hero-frame); }
.hero-screen { overflow: hidden; border-radius: 1.25rem; background: #FFF; aspect-ratio: 1080 / 780; }
.hero-screen img, .cta-screen img { display: block; width: 100%; height: auto; }

/* ── works with + features (ref logos_left3_3x, sec_features_native) ── */
.lp-feat { padding-top: 22.6875rem; background: var(--panel); }
.works { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.works-label { font-size: 12px; line-height: 16px; color: var(--text-4); text-transform: uppercase; }
.works-names { display: flex; justify-content: space-between; width: 67.5rem; max-width: 100%; }
.works-names li { position: relative; font-size: 1.375rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; color: #8A8A8A; white-space: nowrap; transition: color 420ms var(--ease-in-out); }
.works-names li::after { content: ""; position: absolute; left: 50%; bottom: -.625rem; width: .3125rem; height: .3125rem; margin-left: -2.5px; border-radius: 50%; background: var(--orange); opacity: 0; transform: scale(.4); transition: opacity 420ms var(--ease-in-out), transform 420ms var(--ease-in-out); }
.works-names li.is-on { color: var(--text-1); }
.works-names li.is-on::after { opacity: 1; transform: none; }
.lp-feat .lp-head { margin-top: 8.625rem; }

.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.feat { min-width: 0; padding: 1.5rem; border-radius: var(--r-landing-card); background: #FFF; }
.feat-head { display: flex; align-items: center; gap: 1.5rem; }
.ic-tile { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-icon-tile); background: var(--grad-icon-tile); color: #FFF; }
.ic-tile svg { width: 2rem; height: 2rem; stroke-width: 1.5; }
.ic-tile.sm svg { width: 1.5rem; height: 1.5rem; }
.feat-text { min-width: 0; }
.feat-title { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.feat-desc { margin-top: .25rem; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-body-landing); }
.feat-stage { position: relative; height: 18.75rem; margin-top: 2rem; overflow: hidden; border-radius: var(--r-landing-inner); background: linear-gradient(180deg, #FAFAFA, #F5F5F5); }

/* 1 · field types with dashed connectors (ref feat1_platform_chips_3x) */
.fm-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fm-wires path { fill: none; stroke: #C9C9C9; stroke-width: 1; stroke-dasharray: 4 3.5; }
.st-model.is-flow .fm-wires path { animation: fm-march 1.6s var(--ease-out) 1; }
@keyframes fm-march { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.fm-tiles { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1.375rem; }
.fm-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 8rem; height: 9.25rem; padding-top: 1.4375rem; border-radius: 1.25rem; background: #FFF;
  transition: transform var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out);
}
.fm-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.fm-tile:active { transform: scale(.97); transition-duration: var(--d-press); }
.fm-in { display: flex; flex-direction: column; align-items: center; gap: 1.0625rem; transition: opacity 160ms var(--ease-in), transform 160ms var(--ease-in); }
.fm-in.is-out { opacity: 0; transform: translateY(-.375rem) scale(.96); }
.fm-in.is-pre { opacity: 0; transform: translateY(.375rem) scale(.96); transition: none; }
.fm-tile .glyph { --g: 3.75rem; --gr: 1rem; --gi: 1.875rem; }
.fm-label { font-size: 1rem; line-height: 1.5rem; color: var(--text-1); white-space: nowrap; }

/* 2 · frameworks, the selected pill scaled up (ref tone selector) */
.fs-pill { position: absolute; left: 50%; top: 0; width: min(26.8125rem, calc(100% - 5rem)); height: 2.6875rem; transform: translate(-50%, var(--y, 0px)); transition: transform 420ms var(--ease-in-out); }
.fs-bg { position: absolute; inset: 0; border-radius: var(--r-pill); background-color: #FFF; transform: scale(1); transition: transform 420ms var(--ease-in-out), background-color 420ms var(--ease-in-out); }
.fs-pill:hover .fs-bg { background-color: #FDFDFD; }
.fs-label { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1rem; line-height: 1.5rem; font-weight: 400; color: var(--text-1); transform: scale(.875); transition: transform 420ms var(--ease-in-out), color 420ms var(--ease-in-out), font-weight 420ms var(--ease-in-out); }
.fs-pill.is-on .fs-bg { background-color: var(--orange); transform: scale(var(--sx, 1.0746), var(--sy, 1.1163)); }
.fs-pill.is-on .fs-label { color: #FFF; font-weight: 500; transform: none; }
.fs-pill:active .fs-bg { transform: scale(.98); }
.fs-pill.is-on:active .fs-bg { transform: scale(calc(var(--sx, 1.0746) * .98), calc(var(--sy, 1.1163) * .98)); }

/* 3 · visitors chart on hatched tracks (ref feat3_hatch_bar_3x) */
.st-chart { padding: 1.5rem; }
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: 2.5rem; }
.fc-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; }
.fc-bars { margin-top: 1.25rem; }
.fc-bars .bar-col { width: auto; flex: 0 1 5rem; min-width: 0; }
.fc-bars .bar-track { height: 10.5rem; background: none; }
.fc-bars .bar-track::before {
  content: ""; position: absolute; inset: 0; border-radius: .75rem .75rem 0 0;
  background-color: #F6F6F6; background-image: repeating-linear-gradient(150deg, #CECECE 0 1px, transparent 1px .83125rem);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35), #000 75%); mask-image: linear-gradient(180deg, rgba(0,0,0,.35), #000 75%);
}
.fc-bars .bar-day { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); }

/* 4 · team cloud (ref feat4_team_avatars_2x) */
.ft-avatars { position: absolute; inset: 0; }
.ft-av {
  position: absolute; width: var(--s); height: var(--s); font-size: calc(var(--s) * .38); translate: -50% -50%;
  animation: ft-drift 6s var(--ease-in-out) infinite alternate; animation-delay: var(--dl, 0s);
}
@keyframes ft-drift { from { transform: translateY(-.1875rem); } to { transform: translateY(.1875rem); } }
.ft-av.is-new { animation: ft-pop 520ms var(--ease-pop) both, ft-drift 6s var(--ease-in-out) 520ms infinite alternate; }
.ft-av.is-gone { opacity: 0; scale: .6; transition: opacity 240ms var(--ease-in), scale 240ms var(--ease-in); }
@keyframes ft-pop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }
.ft-invite {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; height: 3rem; padding: 0 1.625rem; border-radius: var(--r-pill);
  background: var(--orange); color: #FFF; font-size: 1rem; line-height: 1.5rem; font-weight: 500; white-space: nowrap;
  transition: background-color var(--d-hover) var(--ease-out), scale var(--d-press) var(--ease-pop);
}
.ft-invite:hover { background-color: var(--orange-600); }
.ft-invite:active { scale: .97; }
.ft-invite > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.ft-invite svg { width: 1.125rem; height: 1.125rem; stroke-width: 1.5; }
.ft-invite .fi-b { opacity: 0; transform: translateY(.5rem); }
.ft-invite.is-sent .fi-a { opacity: 0; transform: translateY(-.5rem); }
.ft-invite.is-sent .fi-b { opacity: 1; transform: none; }
.ft-cursor { position: absolute; left: calc(50% + 1.875rem); top: calc(50% + .625rem); color: #FFF; pointer-events: none; transition: opacity 200ms var(--ease-out); filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.ft-cursor svg { width: 1.375rem; height: 1.375rem; }
.st-team:hover .ft-cursor { opacity: 0; }

/* ── how it works (ref sec_howitworks_native) ── */
.lp-how { background: var(--row); }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.how { min-width: 0; padding: 1.5rem; border-radius: var(--r-landing-card); background: #FFF; }
.how-scene { position: relative; height: 12.5rem; overflow: hidden; border-radius: .75rem; }
.how-title { margin-top: 1.5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.how-desc { margin-top: .5rem; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-body-landing); }

.sc-model { display: flex; flex-direction: column; justify-content: center; gap: .5rem; padding: 1.25rem; background: var(--grad-product-frame); }
.sm-row { display: flex; align-items: center; gap: .75rem; height: 3rem; padding: 0 .75rem 0 .5rem; border-radius: .625rem; background: #FFF; box-shadow: 0 1px 2px rgba(68,20,6,.10), 0 6px 16px rgba(68,20,6,.10); }
.sm-ic { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .625rem; background: var(--orange-50); color: var(--orange-700); }
.sm-ic svg { width: 1.125rem; height: 1.125rem; }
.sm-label { flex: 1; min-width: 0; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; white-space: nowrap; }
.sm-type { flex: none; font-size: 12px; line-height: 16px; color: var(--text-4); white-space: nowrap; }
.mf-js .sc-model .sm-row { opacity: 0; transform: translateY(.625rem); }
.mf-js .sc-model.is-play .sm-row { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.sc-model.is-play .sm-row:nth-child(2) { transition-delay: 90ms; }
.sc-model.is-play .sm-row:nth-child(3) { transition-delay: 180ms; }

.sc-code { background: var(--code-bg); }
.sc-code .code { display: flex; flex-direction: column; height: 100%; border-radius: .75rem; border: 0; }
.sc-code .code-head { flex: none; height: 2.5rem; padding: 0 .375rem 0 .625rem; }
.sc-code .code-tab { display: inline-flex; align-items: center; cursor: default; }
.sc-code .code-head .code-lang { color: rgba(255,255,255,.5); }
.sc-code .code-body { flex: 1; align-items: center; padding: 0 .75rem; overflow: hidden; }
.sc-code { --cf: .71875rem; --cl: 1.625rem; }
.sc-code .code-nums { width: .5rem; margin-right: .625rem; font-size: var(--cf); line-height: var(--cl); }
.sc-code pre { font-size: var(--cf); line-height: var(--cl); }
.sc-code .ln { display: block; clip-path: inset(0 100% 0 0); }
.sc-code.is-typed .ln { clip-path: inset(0 0 0 0); }
.sc-code.is-play .ln { clip-path: inset(0 0 0 0); transition: clip-path var(--dur) steps(var(--n), end) var(--dl); }
.sc-code .caret { display: inline-block; width: 2px; height: .9375rem; margin-left: 1px; vertical-align: -.1875rem; border-radius: 1px; background: var(--orange-300); opacity: 0; }
.sc-code.is-done .caret { animation: caret 1.1s steps(1, end) infinite; }
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.sc-res { flex: none; display: flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .875rem; border-top: 1px solid rgba(255,255,255,.06); font-family: var(--mono); font-size: 12px; line-height: 16px; color: rgba(255,255,255,.62); white-space: nowrap; }
.sc-ok { display: inline-flex; flex: none; color: var(--orange-300); }
.sc-ok svg { width: .875rem; height: .875rem; }
.sc-res-t { flex: 1; min-width: 0; }
.sc-ms { color: rgba(255,255,255,.42); font-variant-numeric: tabular-nums; }
.mf-js .sc-code .sc-res > span { opacity: 0; transform: translateY(.25rem); }
.mf-js .sc-code.is-done .sc-res > span { opacity: 1; transform: none; transition: opacity 360ms var(--ease-out), transform 420ms var(--ease-out); }
.sc-code.is-done .sc-res .sc-res-t { transition-delay: 60ms; }
.sc-code.is-done .sc-res .sc-ms { transition-delay: 120ms; }

.sc-live { display: flex; flex-direction: column; justify-content: center; padding: 1.25rem; background: linear-gradient(160deg, #FFF4E6 0%, #FDE1C2 100%); }
.sl-card { padding: .875rem 1rem .75rem; border-radius: .75rem; background: #FFF; box-shadow: 0 1px 2px rgba(124,45,18,.06), 0 10px 24px rgba(124,45,18,.10); }
.sl-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sl-title { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.sl-site { font-size: 12px; line-height: 16px; color: var(--text-4); }
.sl-fig { display: flex; align-items: baseline; margin-top: .25rem; white-space: nowrap; }
.sl-fig .t-number { display: inline-block; min-width: 1.2em; }
.sl-unit { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-3); }
.sl-bars.mbars { height: 2.25rem; margin-top: .5rem; }
.sl-top { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; transition: opacity 200ms var(--ease-out); }
.sl-top.is-swap { opacity: 0; }
.sl-path { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-1); }
.sl-n { flex: none; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── product split + stats (ref sec_product_stats_native, product_check_item_3x) ── */
.lp-product { background: var(--panel); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 38rem; gap: 2rem; }
.split-l { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 2.5rem 0; }
.split-top .lp-h2 { margin-top: 1rem; text-align: left; }
.split-top .lp-lead { max-width: 35rem; }
.checks li { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.checks svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--orange); stroke-width: 2; }
.split-frame { position: relative; height: 37.5rem; overflow: hidden; border-radius: var(--r-landing-card); background: var(--grad-product-frame); }
.split-frame img { position: absolute; left: 2rem; top: 2rem; width: 52.1875rem; max-width: none; height: auto; border-top-left-radius: .625rem; transform: translate3d(0, var(--iy, 0px), 0); will-change: transform; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; height: 15rem; margin-top: 3.75rem; padding: 0 1rem; border-radius: 2rem; background: var(--maroon-landing); }
.stat-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; min-width: 0; text-align: center; }
.stat-c + .stat-c::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 7.5rem; margin-top: -3.75rem; background: rgba(255,255,255,.18); }
.stat-n { font-size: 3.75rem; line-height: 4.5rem; font-weight: 600; letter-spacing: -0.015em; color: #FFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-c span { font-size: 1.125rem; line-height: 1.75rem; color: rgba(255,255,255,.95); }
.mf-js .stats .stat-w { opacity: 0; transform: translateY(.5rem); }
.mf-js .stats.is-counted .stat-w { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out) 300ms, transform 700ms var(--ease-out) 300ms; }

/* ── who it's for (replaces testimonials; ref sec_testimonials_native) ── */
.lp-who { background: var(--row); }
.who-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.who { display: flex; flex-direction: column; min-width: 0; height: 20rem; padding: 2.5rem; border-radius: var(--r-landing-card); background: #FFF; container-type: inline-size; }
.who-title { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.who-text { margin-top: 1rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--text-1); text-wrap: pretty; }
.who-foot { display: flex; align-items: center; gap: 1rem; margin-top: auto; }
.who-av.glyph { --g: 3rem; --gr: .75rem; --gi: 1.5rem; }
.who-role { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.who-role b { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.who-role span { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-body-landing); text-wrap: balance; }
.who-proof { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: .25rem; }
.wp-top { display: flex; align-items: center; gap: .5rem; height: 1.5rem; }
.wp-cap { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-body-landing); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wp-n { display: inline-block; min-width: 3.4ch; text-align: right; color: var(--text-1); font-weight: 500; }
.wp-code { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5625rem; border-radius: .4375rem; background: var(--code-bg); font-family: var(--mono); font-size: 12px; line-height: 16px; color: #C9A99B; white-space: nowrap; }
.wp-metric { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-body-landing); white-space: nowrap; }
.wp-metric b { margin-left: 2px; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.wp-top .verdict { height: 1.5rem; padding: 0 .5625rem; }
.wp-logos { gap: .25rem; }
.wp-logos .client-logo { width: 1.625rem; height: 1.625rem; border-radius: .5rem; font-size: .625rem; line-height: 16px; transition: transform var(--d-hover) var(--ease-out); }
.wp-logos .client-logo.ring { box-shadow: inset 0 0 0 1px var(--line); }
.wp-logos .client-logo:hover { transform: translateY(-2px); }
.wp-top .lang-chip { height: 1.5rem; min-width: 2.125rem; transition: background-color 360ms var(--ease-out), color 360ms var(--ease-out); }
.wp-swap { display: grid; justify-items: end; }
.wp-swap > span { grid-area: 1 / 1; transition: opacity 320ms var(--ease-out), transform 360ms var(--ease-out); }
.wp-swap .ws-b { opacity: 0; transform: translateY(.375rem); }
.wp-swap.is-b .ws-a { opacity: 0; transform: translateY(-.375rem); }
.wp-swap.is-b .ws-b { opacity: 1; transform: none; }
@container (max-width: 459px) {
  .who-foot { flex-wrap: wrap; row-gap: 1.25rem; }
  .who-proof { order: 3; flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
  .wp-swap { justify-items: end; }
}

/* ── pricing (ref sec_pricing_native, pricing_most_popular_badge_4x) ── */
.lp-pricing { background: var(--panel); }
.lp-pricing .lp-head { margin-bottom: 3rem; }
.bill { margin-top: 2rem; }
.bill-seg button { padding: 0 .9375rem; }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.plan-card { min-width: 0; padding: 1.5rem 1.5rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-landing-card); background: #FFF; }
.plan-card.pro { border-color: var(--maroon-landing); background: var(--maroon-landing); color: #FFF; }
.pc-panel { padding: 1.25rem; border-radius: .75rem; background: #F5F5F5; color: var(--text-1); }
.plan-card.pro .pc-panel { background: #FFF; }
.pc-name-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pc-name { font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.pc-pop { display: inline-flex; align-items: center; flex: none; height: 1.875rem; padding: 0 .875rem; border: 1px solid var(--orange-border-soft); border-radius: var(--r-pill); background: var(--orange-50); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--orange-700); white-space: nowrap; }
.pc-blurb { margin-top: .5rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-body-landing); text-wrap: balance; }
.pc-price { display: flex; align-items: center; gap: .25rem; margin-top: 1.5rem; }
.pc-num { position: relative; display: inline-block; height: 3.5rem; overflow: hidden; font-size: 3rem; line-height: 3.5rem; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.pc-num .pn-cur { display: block; white-space: nowrap; }
.pc-num .pn-next { position: absolute; left: 0; top: 0; }
.pc-per { font-size: 1rem; line-height: 1.5rem; color: var(--text-body-landing); white-space: nowrap; transition: opacity 160ms var(--ease-out); }
.pc-per.is-swap { opacity: 0; }
.pc-cta { margin-top: 1.5rem; }
.pc-feats { margin-top: 1.5rem; padding: 0 1rem; }
.pc-feats p { font-size: 1rem; line-height: 1.5rem; }
.pc-feats ul { margin-top: .375rem; }
.pc-feats li { display: flex; align-items: flex-start; gap: .6875rem; padding: .375rem 0; font-size: 1rem; line-height: 1.5rem; }
.pc-feats svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .1875rem; color: var(--orange); stroke-width: 2; }
.plan-card.pro .pc-feats svg { color: var(--orange-300); }

/* ── faq (ref sec_faq_native; flat, no fade into the next section) ── */
.lp-faq { background: var(--panel); }
.faq-list { max-width: 54.125rem; margin: 0 auto; border-top: 1px solid var(--rule-faq); }
.faq-item { border-bottom: 1px solid var(--rule-faq); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.5rem 0 .75rem; font-size: 1.5rem; line-height: 2rem; font-weight: 500; color: var(--text-1); text-align: left; }
.faq-ic { position: relative; flex: none; width: 1.25rem; height: 1.25rem; color: var(--text-1); }
.faq-ic svg { position: absolute; inset: 0; width: 1.25rem; height: 1.25rem; }
.faq-ic .v { transform: rotate(-90deg); transition: transform 320ms var(--ease-in-out); }
.faq-item.is-open .faq-ic .v { transform: rotate(0deg); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; padding-bottom: .75rem; transition: grid-template-rows 320ms var(--ease-in-out); }
.faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-in { min-height: 0; overflow: hidden; }
.faq-a { max-width: 48.75rem; padding-bottom: .75rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-body-landing); opacity: 0; transition: opacity 200ms var(--ease-out); }
.faq-item.is-open .faq-a { opacity: 1; transition: opacity 320ms var(--ease-out) 80ms; }

/* ── final CTA (ref sec_cta_native) ── */
.lp-cta { position: relative; overflow: hidden; padding-top: 7.5rem; background: var(--cream); }
.lp-cta .lp-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-cta .lp-lead { margin-top: 1.5rem; }
.cta-btn { margin-top: 2rem; }
.cta-btn .btn-primary { min-width: 9.375rem; padding: 0 1.25rem; }
.cta-shot {
  width: 77.5rem; max-width: calc(100% + 4rem); height: 39.3125rem; margin-top: -1.5rem; padding: 5rem 5rem 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 27.8125rem, transparent 40rem); mask-image: linear-gradient(180deg, #000 0, #000 27.8125rem, transparent 40rem);
}
.cta-screen { overflow: hidden; border-radius: 1.25rem; background: #FFF; box-shadow: var(--sh-cta-halo); }

/* ── footer (ref sec_footer_native, footer_social_3x) ── */
.lp-foot { position: relative; height: 45.125rem; overflow: hidden; background: var(--maroon-landing); color: #FFF; }
.foot-in { position: relative; z-index: 1; display: grid; grid-template-columns: 23.625rem minmax(0, 1fr); padding-top: 7.5rem; }
.foot-brand { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 10.875rem; }
.foot-social { display: flex; gap: .75rem; }
.foot-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .375rem; background: var(--maroon-social); color: #FFF; transition: background-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop); }
.foot-social a:hover { background-color: #92381A; }
.foot-social a:active { transform: scale(.94); }
.foot-social svg { width: 1.25rem; height: 1.25rem; }
.foot-cols { display: grid; grid-template-columns: 225fr 232fr 279fr 126fr; }
.foot-col h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: #FFF; white-space: nowrap; }
.foot-col a { display: block; width: max-content; margin-top: .5rem; font-size: 1rem; line-height: 1.5rem; color: rgba(255,255,255,.92); white-space: nowrap; transition: color var(--d-hover) var(--ease-out); }
.foot-col h3 + a { margin-top: 1.625rem; }
.foot-col a:hover { color: var(--orange-300); }
.foot-copy { position: absolute; left: 0; right: 0; top: 24.625rem; text-align: center; font-size: 1rem; line-height: 1.5rem; color: rgba(255,255,255,.92); }
.foot-mark {
  position: absolute; left: 50%; top: calc(45.125rem - min(19.3125rem, 21.48vw)); transform: translateX(calc(-50% - min(1.3125rem, 1.46vw))); z-index: 0;
  font-size: min(25.625rem, 28.47vw); line-height: 1; font-weight: 600; letter-spacing: -0.04em; white-space: nowrap; user-select: none; pointer-events: none;
  background: linear-gradient(180deg, #5F210D 14%, rgba(68,20,6,0) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── between desktop and phone ── */
@media (max-width: 1439.98px) {
  .sc-code { --cf: .6875rem; }
}
@media (max-width: 1279.98px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); }
  .hero-h1 { font-size: 4rem; line-height: 4.875rem; }
  .lp-h2 { font-size: 3.25rem; line-height: 3.875rem; }
  .who { height: auto; min-height: 20rem; }
  .who-foot { margin-top: 2rem; }
  .sc-code { --cf: .625rem; --cl: 1.5rem; }
  .sc-code .code-body { padding-inline: .625rem; }
}
@media (min-width: 1180px) and (max-width: 1279.98px) {
  .sm-row .scope { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .plan-card { padding: 1.25rem 1.25rem .875rem; }
  .pc-feats { padding: 0 .5rem; }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .pc-feats li { font-size: .9375rem; line-height: 1.375rem; }
  .pc-feats svg { margin-top: 2px; }
  .fm-tiles { gap: 1rem; }
  .fm-tile { width: 7.25rem; height: 8.75rem; padding-top: 1.25rem; }
}

/* ── small laptops and tablets: the three steps become rows, picture left ── */
@media (min-width: 768px) and (max-width: 1179.98px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .how { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 2.5rem; padding: 1rem 2.5rem 1rem 1rem; }
  .how-scene { grid-row: 1 / span 2; height: 14.5rem; }
  .how-title { align-self: end; margin-top: 0; font-size: 1.5rem; line-height: 2rem; }
  .how-desc { align-self: start; max-width: 23.75rem; font-size: 1rem; line-height: 1.5rem; }
  .sc-code { --cf: .71875rem; --cl: 1.625rem; }
  .sc-code .code-body { padding-inline: 1rem; }
  .sm-row .scope { display: inline-flex; }
}

/* ── phone and tablet (designed at 390) ── */
@media (max-width: 1023.98px) {
  body.lp { background: var(--panel); }
  .lp-wrap { padding-inline: 2rem; }
  .lp-sec { padding: 4.5rem 0; }
  .lp-head { margin-bottom: 2.5rem; }
  .lp-h2 { font-size: 2.125rem; line-height: 2.5rem; }
  .br-d { display: none; }
  .lp-lead { margin-top: 1rem; }

  .lp-nav { height: 4rem; }
  .lp-nav::before { height: 4rem; }
  .lp-nav-in { height: 4rem; padding: 0 1rem; }
  .lp-logo .mf-mark { width: 1.625rem !important; height: 1.625rem !important; }
  .lp-logo .mf-wordmark { font-size: 1.5rem !important; }
  .lp-logo.mf-lockup { gap: .625rem; }
  .lp-links { display: none; }
  .lp-login { margin-right: 1rem; }
  .lp-signup.btn-white { position: relative; height: 2.5rem; padding: 0 1rem; }
  .lp-signup.btn-white::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.75rem; transform: translateY(-50%); }
  .lp-menu { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: .5rem; border-radius: 50%; background: rgba(255,255,255,.10); color: #FFF; transition: background-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop); }
  .lp-menu:active { transform: scale(.94); background: rgba(255,255,255,.16); }
  .lp-menu svg { width: 1.25rem; height: 1.25rem; }

  .lp-hero { padding-top: 7rem; }
  .hero-h1 { max-width: 35rem; font-size: 2.5rem; line-height: 2.75rem; text-wrap: balance; }
  .hero-h1 .hl { display: inline; }
  .hero-sub { margin-top: 1rem; max-width: 30rem; font-size: 1rem; line-height: 1.5rem; }
  .hero-ctas { gap: .75rem; margin-top: 1.75rem; }
  .hero-frame { width: calc(100% - 2rem); max-width: 45rem; margin: 3rem 0 -7.5rem; padding: .5rem; border-radius: 1.5rem; }
  .hero-screen { border-radius: 1rem; }

  .lp-feat { padding-top: 10.5rem; }
  .works-names { flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
  .works-names li { font-size: 1rem; line-height: 1.5rem; }
  .lp-feat .lp-head { margin-top: 4rem; }

  .feat-grid, .how-grid, .who-grid, .price-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .feat { padding: 1rem; }
  .feat-head { gap: 1rem; align-items: flex-start; }
  .ic-tile { width: 2.5rem; height: 2.5rem; border-radius: .625rem; }
  .ic-tile svg { width: 1.625rem; height: 1.625rem; }
  .feat-title { font-size: 1.25rem; line-height: 1.75rem; }
  .feat-stage { height: 16.25rem; margin-top: 1.25rem; }
  .fm-tiles { gap: .75rem; }
  .fm-tile { width: 5.75rem; height: 7.5rem; padding-top: 1.125rem; border-radius: 1rem; }
  .fm-in { gap: .75rem; }
  .fm-tile .glyph { --g: 3rem; --gr: .875rem; --gi: 1.5rem; }
  .fm-label { font-size: max(12px, .8125rem); line-height: max(16px, 1.125rem); }
  .fs-pill { width: calc(100% - 3rem); height: 2.5rem; }
  .fs-pill::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
  .fs-label { font-size: .9375rem; line-height: max(18px, 1.25rem); transform: scale(.9333); }
  .st-chart { padding: 1rem; }
  .fc-head { height: 2.75rem; }
  .fc-bars { margin-top: 1rem; }
  .fc-bars .bar-col { flex-basis: 3.25rem; }
  .fc-bars .bar-track { height: 8.25rem; }
  .fc-bars .bar-label { left: .5rem; top: .5rem; font-size: max(12px, .8125rem); line-height: max(16px, 1.125rem); }
  .ft-invite { height: 2.75rem; padding: 0 1.25rem; font-size: .9375rem; line-height: max(18px, 1.25rem); }
  .ft-cursor { left: calc(50% + 1.5rem); top: calc(50% + .5rem); }

  .how { padding: 1rem; }
  .how-title { margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.75rem; }
  .how-scene { height: 13.75rem; }
  .sc-code .code-body { overflow-x: auto; scrollbar-width: none; }
  .sc-code .code-body::-webkit-scrollbar { display: none; }
  .sc-code { --cf: .65625rem; --cl: 1.625rem; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split-l { padding: 0; }
  .checks { margin-top: 1.75rem; }
  .checks li { align-items: flex-start; padding: .375rem 0; min-height: 0; }
  .checks svg { margin-top: 0; }
  .split-frame { height: 22.5rem; border-radius: 1.25rem; }
  .split-frame img { left: 1.25rem; top: 1.25rem; width: 37.5rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; height: auto; margin-top: 2.5rem; padding: .5rem; border-radius: 1.5rem; }
  .stat-c { gap: .375rem; padding: 1.75rem .5rem; }
  .stat-c + .stat-c::before { display: none; }
  .stat-c:nth-child(2n)::before { content: ""; display: block; height: 60%; top: 20%; margin-top: 0; }
  .stat-c:nth-child(n+3)::after { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: rgba(255,255,255,.18); }
  .stat-n { font-size: 2.5rem; line-height: 3rem; }
  .stat-c span { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); }

  .who { height: auto; min-height: 0; padding: 1.5rem; }
  .who-title { font-size: 1.25rem; line-height: 1.75rem; }
  .who-text { margin-top: .75rem; font-size: 1rem; line-height: 1.625rem; }
  .who-foot { margin-top: 1.5rem; }

  .plan-card { padding: 1rem 1rem 1.25rem; }
  .pc-feats { padding: 0 .75rem; }

  .faq-q { padding: 1.25rem 0 .625rem; font-size: 1.125rem; line-height: 1.625rem; }
  .faq-a-wrap { padding-bottom: .625rem; }
  .faq-a { padding-bottom: .625rem; font-size: .9375rem; line-height: 1.375rem; }

  .lp-cta { padding-top: 4.5rem; }
  .lp-cta .lp-lead { margin-top: 1rem; }
  .cta-btn { margin-top: 1.75rem; }
  .cta-shot { width: calc(100% + 2.5rem); max-width: none; height: 15rem; margin: .25rem -1.25rem 0; padding: 2.5rem 1.25rem 0; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 9.375rem, transparent 15rem); mask-image: linear-gradient(180deg, #000 0, #000 9.375rem, transparent 15rem); }
  .cta-screen { border-radius: .75rem; }

  .lp-foot { height: auto; padding-bottom: 6rem; }
  .foot-in { grid-template-columns: minmax(0, 1fr); padding-top: 3.5rem; }
  .foot-brand { height: auto; gap: 1.25rem; }
  .foot-brand > [data-logo] { height: 2.75rem; }
  .foot-social a { width: 2.75rem; height: 2.75rem; }
  .foot-col a { min-width: 2.75rem; }
  .sc-code .code-head { height: 3.25rem; }
  .lp-foot .mf-mark { width: 1.625rem !important; height: 1.625rem !important; }
  .lp-foot .mf-wordmark { font-size: 1.625rem !important; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; margin-top: 2.75rem; }
  .foot-col h3 { font-size: 1.125rem; line-height: 1.625rem; }
  .foot-col h3 + a { margin-top: .75rem; }
  .foot-col a { margin-top: 0; padding: .625rem 0; line-height: 1.5rem; }
  .foot-copy { position: static; margin-top: 2.5rem; text-align: left; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); }
  .foot-mark { top: auto; bottom: calc(-0.246 * 27vw); font-size: 27vw; transform: translateX(calc(-50% - 1.4vw)); }
}

/* ── tablet (768 to 1023): two columns, desktop rhythm at a smaller scale ── */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .lp-sec { padding: 6rem 0; }
  .lp-head { margin-bottom: 3rem; }
  .lp-h2 { font-size: 2.875rem; line-height: 3.375rem; }
  .br-d { display: inline; }
  .lp-lead { margin-top: 1.25rem; }

  .lp-hero { padding-top: 8.75rem; }
  .hero-h1 { max-width: 45rem; font-size: 3.625rem; line-height: 4.125rem; }
  .hero-h1 .hl { display: block; }
  .hero-sub { margin-top: 1.375rem; max-width: 33.75rem; font-size: 1.125rem; line-height: 1.75rem; }
  .hero-ctas { gap: 1rem; margin-top: 2rem; }
  .hero-frame { width: calc(100% - 4rem); max-width: none; margin: 4rem 0 -12.5rem; padding: .75rem; border-radius: 1.875rem; }
  .hero-screen { border-radius: 1.125rem; }

  .lp-feat { padding-top: 17rem; }
  .works-names { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  .works-names li { font-size: 1.125rem; line-height: 1.75rem; }
  .lp-feat .lp-head { margin-top: 6rem; }
  .feat-grid, .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  .how { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 2rem; padding: 1rem 2rem 1rem 1rem; }
  .how-scene { height: 14.5rem; }
  .how-title { margin-top: 0; font-size: 1.5rem; line-height: 2rem; }
  .sc-code { --cf: .65625rem; --cl: 1.625rem; }

  .split-frame { height: 28.75rem; border-radius: 1.5rem; }
  .split-frame img { left: 1.75rem; top: 1.75rem; width: 51.25rem; }
  .checks { margin-top: 2rem; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; height: 12.5rem; margin-top: 3.5rem; padding: 3.625rem .5rem 0; border-radius: 1.75rem; }
  .stat-c { gap: .5rem; padding: 0 .375rem; }
  .stat-c + .stat-c::before, .stat-c:nth-child(2n)::before { content: ""; display: block; top: -.625rem; height: 6.5rem; margin-top: 0; }
  .stat-c:nth-child(n+3)::after { display: none; }
  .stat-n { font-size: 2.875rem; line-height: 3.375rem; }
  .stat-c span { font-size: .9375rem; line-height: 1.375rem; }

  .who { padding: 1.75rem; }
  .who-text { font-size: 1.0625rem; line-height: 1.6875rem; }

  .price-grid { gap: 1rem; }
  .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.75rem; align-items: start; padding: 1rem; }
  .pc-feats { margin-top: 0; padding: 1.125rem .5rem .25rem 0; }

  .faq-q { padding: 1.5rem 0 .75rem; font-size: 1.3125rem; line-height: 1.875rem; }
  .faq-a { font-size: 1rem; line-height: 1.5rem; }

  .lp-cta { padding-top: 6rem; }
  .cta-shot { width: calc(100% + 4rem); height: 26.25rem; margin: 0 -2rem; padding: 3rem 2rem 0; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 16.25rem, transparent 26.25rem); mask-image: linear-gradient(180deg, #000 0, #000 16.25rem, transparent 26.25rem); }
  .cta-screen { border-radius: 1rem; }

  .lp-foot { padding-bottom: calc(21.5vw + 2rem); }
  .foot-in { padding-top: 4.5rem; }
  .foot-brand { flex-direction: row; align-items: center; justify-content: space-between; }
  .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; }
  .foot-copy { margin-top: 3rem; text-align: center; }
  .foot-mark { bottom: calc(-0.246 * 28.47vw); font-size: 28.47vw; transform: translateX(calc(-50% - 1.46vw)); }
}

@media (max-width: 767.98px) {
  .lp-wrap { padding-inline: 1rem; }
  .lp-login { display: none; }
  .hero-ctas { flex-direction: column; align-self: stretch; }
  .hero-in { align-self: stretch; }
  .hero-ctas a { width: 100%; }
  .hero-frame { width: calc(100% - 2rem); }
  .hero-screen { position: relative; height: 20rem; aspect-ratio: auto; }
  .hero-screen img, .cta-screen img { position: absolute; left: -.25rem; top: 0; width: 40.5rem; max-width: none; height: auto; }
  .cta-screen { position: relative; height: 18.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mf-js .lp [data-reveal], .mf-js .lp [data-reveal="frame"] { transform: none; }
  .st-model.is-flow .fm-wires path, .ft-av, .sc-code.is-done .caret { animation: none; }
  .lp-hero .tx-grid svg { transform: translate3d(-50%, 0, 0); }
  .split-frame img { transform: none; }
}

@media (max-width: 380px) {
  .sm-row .scope + .sm-type { display: none; }
  .sc-code { --cf: .59375rem; --cl: 1.5rem; }
  .sc-code .code-body { padding-inline: .625rem; }
}

/* manifolio.com: limba (nu există în prototip) */
.lp-lang { margin-right: 1.5rem; letter-spacing: .02em; }
.foot-lang { display: inline-flex; gap: 1rem; margin-left: 1.5rem; }
.foot-lang a { color: rgba(255,255,255,.72); transition: color var(--d-hover) var(--ease-out); }
.foot-lang a:hover, .foot-lang a[aria-current] { color: #FFF; }
.foot-lang a[aria-current] { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 1023.98px) {
  .foot-lang { display: flex; gap: .25rem; margin: .25rem 0 0 -.5rem; }
  .foot-lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .foot-lang { justify-content: center; margin-left: 0; }
}