/* Stoa landing page */
:root {
  --frame: #d5eafb; --ink: #0d0e10; --ink2: #3b3f46; --mute: #74798181; --grey: #7a7f87; --grey2: #9ba0a8; --line: #e9ebee; --soft: #f7f7f8; --card: #fafafa;
  --orange: #ef5a2a; --green: #20a77f; --green-bg: #effaf5; --green-line: #8ed9bf; --amber: #d4731b; --amber-bg: #fff1e2;
  --disp: 'Inter Tight', 'Inter', system-ui, sans-serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
  --gut: clamp(16px, 2.3vw, 34px); --fr: clamp(6px, 1.45vw, 22px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--frame); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.i { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
:focus-visible { outline: 2px solid #1f66d1; outline-offset: 2px; }

.frame { padding: var(--fr) var(--fr) 0; }
.page { background: #fff; overflow: clip; position: relative; }

/* Buttons (mono, square) */
.mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 17px; border-radius: 4px; font: 500 14px/1 var(--mono); letter-spacing: -.01em; white-space: nowrap; border: 0; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; }
.mbtn.light { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(13, 14, 16, .1), 0 0 0 1px rgba(13, 14, 16, .06); }
.mbtn.light:hover { background: #f3f4f6; }
.mbtn.dark { background: #0b0b0c; color: #fff; }
.mbtn.dark:hover { background: #222327; }
.mbtn.lg { height: 52px; padding: 0 28px; font-size: 15.5px; }
.mbtn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.mbtn.block { display: flex; width: 100%; }
.mbtn .i { width: 15px; height: 15px; }

/* Hero */
.hero { position: relative; color: #fff; padding: 0 var(--gut); overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg img { width: 100%; height: auto; }
.hero-bg img:first-child { margin-top: -2%; }
.hero-bg .mir { transform: scaleY(-1); }
.nav { position: relative; z-index: 5; height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand .mark { width: 34px; height: 34px; border-radius: 7px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.brand .mark svg { width: 24px; height: 24px; fill: var(--ink); }
.brand .word { font: 500 25px/1 var(--disp); letter-spacing: -.035em; }
.brand.dark .mark { background: var(--ink); }
.brand.dark .mark svg { fill: #fff; }
.links { display: flex; gap: clamp(20px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.links a { font: 400 13.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .015em; opacity: .94; padding: 8px 0; transition: opacity .2s; }
.links a:hover { opacity: 1; }
.links a.on { font-weight: 600; opacity: 1; }
.acts { justify-self: end; display: flex; gap: 12px; align-items: center; }
.burger { display: none; width: 40px; height: 40px; border-radius: 4px; border: 0; background: #fff; position: relative; cursor: pointer; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--ink); transition: transform .25s; }
.burger span:first-child { top: 16px; } .burger span:last-child { top: 23px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.hero-copy { position: relative; z-index: 3; padding-top: clamp(40px, 5.6vw, 84px); }
.h-hero { text-shadow: 0 1px 24px rgba(10, 60, 140, .18); font: 500 clamp(42px, 4.75vw, 72px)/.98 var(--disp); letter-spacing: -.042em; margin: 0; max-width: 12.5em; text-wrap: balance; }
.h-hero .ln { display: block; }
.hero-sub { font: 400 clamp(17px, 1.36vw, 19.5px)/1.42 var(--sans); letter-spacing: -.018em; max-width: 27em; margin: 22px 0 0; text-shadow: 0 0 2px rgba(20, 70, 150, .28), 0 1px 18px rgba(10, 60, 140, .35); }
.hero-cta { display: flex; align-items: center; gap: clamp(64px, 8.6vw, 124px); margin-top: 34px; position: relative; }
.hero-chip { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 13px 0 6px; background: #fff; color: var(--ink); border-radius: 3px; font: 400 13.5px/1 var(--mono); letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.hero-chip .dotic { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.hero-chip .dotic .i { width: 13px; height: 13px; }
.hero-line, .final-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.hero-line path, .final-line path { fill: none; stroke: rgba(255, 255, 255, .88); stroke-width: 1.25; }

.hero-win { position: relative; z-index: 3; margin-top: clamp(48px, 5.2vw, 76px); height: clamp(430px, 40vw, 590px); border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: 0 -1px 0 rgba(255, 255, 255, .5), 0 30px 60px -20px rgba(10, 40, 90, .35); }
.hero-win .bx-win { height: 100%; }
.hero-win .bx-main { height: 100%; }
.hero-win .bx-canvas { height: 100%; }
.hero-win .bx-node { cursor: pointer; }
.hero-win .bx-insp-in { transition: opacity .25s; }
.hero-win .bx-insp-in.swap { opacity: 0; }
.hero-win::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; z-index: 4; }

/* Logos */
.logos { padding: clamp(48px, 6vw, 80px) var(--gut) 0; text-align: center; }
.logos p { margin: 0 0 26px; font-size: 15px; color: var(--grey); letter-spacing: -.01em; }
.wordmarks { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(28px, 4.6vw, 64px); max-width: 1100px; color: #8a8f97; }
.wm { display: inline-flex; align-items: center; gap: 8px; height: 34px; white-space: nowrap; }
.wm svg { width: 20px; height: 20px; }
.wm-kestrel { font: 600 19px/1 var(--disp); letter-spacing: -.03em; }
.wm-ardent { font: 600 16px/1 var(--sans); letter-spacing: .32em; }
.wm-lumen { font: 500 20px/1 Georgia, 'Times New Roman', serif; font-style: italic; letter-spacing: -.02em; }
.wm-lumen i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px currentColor; }
.wm-bake { font: 700 19px/1 var(--disp); letter-spacing: -.05em; }
.wm-bake b { font: 500 12px/1 var(--mono); border: 1.5px solid currentColor; border-radius: 3px; padding: 2px 3px; margin-left: 2px; }
.wm-ostra { font: 400 22px/1 Georgia, serif; letter-spacing: .01em; }
.wm-ostra span { font: 600 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; margin-left: 2px; align-self: flex-end; padding-bottom: 8px; }
.wm-pomona { font: 600 20px/1 var(--sans); letter-spacing: -.045em; }

/* Sections */
.sec { padding: clamp(84px, 10vw, 150px) 0 0; }
.wrap { max-width: 1248px; margin: 0 auto; padding: 0 var(--gut); }
.sec-head { margin-bottom: clamp(36px, 4.4vw, 60px); }
.sec-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 5px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px #ececee, 0 2px 4px rgba(0, 0, 0, .05); font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 22px; }
.tag .tq { width: 21px; height: 21px; border-radius: 5px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.tag .tq .i { width: 13px; height: 13px; }
.h2 { font: 500 clamp(34px, 3.75vw, 54px)/1.02 var(--disp); letter-spacing: -.042em; margin: 0; text-wrap: balance; }
.lede { font: 400 clamp(16.5px, 1.3vw, 18.5px)/1.5 var(--sans); letter-spacing: -.02em; color: var(--grey); max-width: 27em; margin: 0; text-align: right; }

.dots { background-color: #f6f6f7; background-image: radial-gradient(circle, #e0e1e4 1.3px, transparent 1.6px); background-size: 24px 24px; background-position: 6px 6px; }

/* Use cases */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.uc { border-radius: 5px; background: var(--card); box-shadow: 0 0 0 1px #eeeef0, 0 1px 2px rgba(0, 0, 0, .03); overflow: hidden; display: flex; flex-direction: column; }
.uc-fin, .uc-ppl { grid-column: span 2; }
.uc-sales { grid-column: 1 / -1; }
.uc-art { position: relative; height: 300px; overflow: hidden; }
.uc-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(rgba(250, 250, 250, 0), var(--card)); pointer-events: none; }
.uc-txt { padding: 26px 32px 36px; text-align: center; }
.uc-txt h3 { font: 500 clamp(21px, 1.75vw, 25px)/1.15 var(--disp); letter-spacing: -.035em; margin: 0 0 12px; }
.uc-txt p { margin: 0 auto; max-width: 30em; font-size: 15.5px; line-height: 1.55; letter-spacing: -.015em; color: var(--grey); }

.uc-ops .ring { position: absolute; border-radius: 50%; border: 22px solid rgba(13, 14, 16, .028); }
.uc-ops .r1 { width: 260px; height: 260px; right: -70px; top: -150px; }
.uc-ops .r2 { width: 240px; height: 240px; left: -40px; bottom: -170px; }
.uc-ops .arc { position: absolute; border-radius: 50%; border: 1.5px solid transparent; }
.uc-ops .a1 { width: 210px; height: 210px; left: -150px; top: -110px; border-right-color: #6c7077; transform: rotate(30deg); }
.uc-ops .a2 { width: 210px; height: 210px; right: -120px; bottom: -40px; border-top-color: #6c7077; transform: rotate(-30deg); }
.uc-ops .blk { position: absolute; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 0 0 7px rgba(13, 14, 16, .07), 0 10px 20px -6px rgba(0, 0, 0, .3); }
.uc-ops .b1 { width: 78px; height: 78px; left: calc(50% - 98px); top: 64px; }
.uc-ops .b1 .i { width: 30px; height: 30px; }
.uc-ops .b2 { width: 60px; height: 60px; left: calc(50% + 12px); top: 150px; }
.uc-ops .b2 .i { width: 24px; height: 24px; }
.uc-wire { position: absolute; left: calc(50% - 50px); top: 100px; width: 100px; height: 70px; overflow: visible; }
.uc-wire path, .cw path, .fork path, .trend-svg .ln { fill: none; stroke: #c8cbd0; stroke-width: 2; }
.uc-ops .uc-wire path { stroke: var(--orange); stroke-width: 2; }
.uc-pill { position: absolute; }

.uc-fin .lane { position: absolute; border: 1.5px solid #e3e4e7; border-radius: 40px; }
.uc-fin .l1 { left: 18%; right: 26%; top: -40px; height: 70px; }
.uc-fin .l2 { left: 54%; right: -10%; bottom: 20px; height: 80px; border-color: #e9eaec; }
.chain { position: absolute; left: 50%; top: 82px; display: flex; align-items: center; transform: translateX(-50%); }
.mn { width: 252px; flex: none; background: #fff; border-radius: 5px; box-shadow: 0 0 0 1px #e6e7ea, 0 3px 10px -4px rgba(0, 0, 0, .08); padding: 7px; }
.mn-h { display: flex; align-items: center; gap: 8px; background: #f4f4f5; border-radius: 4px; padding: 8px 10px; font-size: 15px; }
.mn-h b { font-weight: 600; flex: 1; letter-spacing: -.01em; }
.mn-h .i { width: 16px; height: 16px; }
.mn-b { padding: 13px 8px 7px; font-size: 14.5px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.mn.hl { box-shadow: 0 0 0 1.5px #2c9b83, 0 10px 24px -10px rgba(20, 120, 100, .35); }
.mn.hl .mn-h { background: #e3f6f0; color: #17705d; }
.mn.am .mn-h { background: #fff3e7; color: #b8600f; }
.cw { width: 52px; height: 2px; flex: none; overflow: visible; }
.ucur { position: absolute; left: calc(50% + 120px); top: 150px; width: 54px; height: 54px; }
.ucur svg { position: absolute; left: 0; top: 0; width: 22px; height: 22px; }
.ucur img { position: absolute; left: 16px; top: 18px; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px #fff, 0 4px 10px rgba(0, 0, 0, .2); }

.uc-sales .uc-art { height: 360px; display: grid; grid-template-columns: 1fr 1.25fr; }
.sales-l { align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 0 40px; }
.vs { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #e6e7ea, 0 2px 6px -3px rgba(0, 0, 0, .08); padding: 7px 12px 7px 7px; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; }
.vs em { font-style: normal; color: var(--grey); font-size: 13.5px; margin-left: 4px; }
.vs em.score { color: #fff; background: var(--ink); border-radius: 5px; padding: 2px 7px; font-weight: 600; font-size: 13px; }
.vs-i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #efeff1; }
.vs.ai .vs-i { background: #eee7ff; color: #7a4ddf; }
.vs-i .i { width: 15px; height: 15px; }
.vline { display: block; width: 2px; height: 22px; margin-left: 20px; background: #e3e4e7; position: relative; }
.vline i { position: absolute; inset: 0; background: var(--orange); transform-origin: top; }
.trend { position: relative; margin: 34px 0 0 0; background: #fff; border-radius: 26px 0 0 0; box-shadow: -1px -1px 0 #eeeef0; padding: 36px 0 0 38px; overflow: hidden; }
.trend-h b { display: block; font: 500 19px/1.2 var(--sans); letter-spacing: -.02em; }
.trend-h span { display: block; margin-top: 4px; font-size: 14px; color: var(--grey); }
.trend-h em { font-style: normal; color: #24946f; }
.trend-svg { position: absolute; left: 0; right: 0; bottom: 34px; width: 100%; height: 190px; }
.trend-svg .ln { stroke: #2b2d31; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.trend-tip { position: absolute; left: 70%; top: 118px; transform: translateX(-50%); background: var(--ink); color: #9ea2a9; border-radius: 999px; padding: 7px 13px; font-size: 14px; white-space: nowrap; }
.trend-tip b { color: #fff; font-weight: 600; }
.trend-dot { position: absolute; left: 70%; top: 158px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #2b2d31; }
.trend-x { position: absolute; left: 38px; right: 30px; bottom: 10px; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--grey2); }

.ppl { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); display: flex; align-items: center; }
.ppl .mn { width: 250px; }
.ppl .mn-b .ini { width: 24px; height: 24px; border-radius: 50%; background: #e7e1d6; color: #6b5a3a; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.fork { width: 80px; height: 150px; flex: none; overflow: visible; }
.ppl-r { display: flex; flex-direction: column; gap: 22px; }
.ppl-r .row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #e6e7ea, 0 2px 6px -3px rgba(0, 0, 0, .08); height: 40px; padding: 0 10px 0 12px; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; }
.ppl-r .row .i { width: 16px; height: 16px; color: var(--ink2); }
.ppl-r .ok { margin-left: 12px; width: 20px; height: 20px; border-radius: 50%; background: #e3f6ef; display: grid; place-items: center; }
.ppl-r .ok .i { width: 12px; height: 12px; color: var(--green); stroke-width: 2.4; }

.tk { position: absolute; left: 50%; top: 46px; width: 290px; transform: translateX(-50%); background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px #e6e7ea, 0 8px 22px -12px rgba(0, 0, 0, .2); padding: 14px 16px 16px; }
.tk-h { display: flex; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tk-h span { color: var(--grey); font-weight: 500; }
.tk p { margin: 8px 0 12px; font-size: 14px; color: var(--ink2); line-height: 1.45; }
.cls { display: inline-flex; align-items: center; gap: 6px; background: #eee7ff; color: #6a3fd0; border-radius: 6px; padding: 4px 9px; font-size: 13px; font-weight: 500; }
.cls .i { width: 14px; height: 14px; }
.tk-a { display: flex; gap: 8px; margin-top: 14px; }
.ta { flex: 1; text-align: center; height: 34px; line-height: 32px; border-radius: 6px; border: 1px solid #dfe1e5; font-size: 13.5px; font-weight: 500; transition: background .3s, color .3s; }
.ta.yes { background: var(--ink); color: #fff; border-color: var(--ink); }
.ta.yes.done { background: #e3f6ef; color: #17805f; border-color: #a9e2cd; }
.ucur.u2 { left: calc(50% - 10px); top: 196px; }

/* Run demo */
.runbox { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #e6e7ea, 0 24px 60px -30px rgba(13, 14, 16, .22); }
.rb-top { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 12px 0 18px; border-bottom: 1px solid #e9ebee; }
.rb-t { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-t b { color: var(--ink); font-weight: 600; }
.rb-t .sep { color: var(--grey2); }
.rb-st { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--grey); white-space: nowrap; }
.rb-st i { width: 8px; height: 8px; border-radius: 50%; background: #c4c8ce; }
.rb-st.run i { background: var(--orange); animation: blink 1s infinite; }
.rb-st.ok i { background: var(--green); }
.rb-st.ok { color: var(--green); }
@keyframes blink { 50% { opacity: .35; } }
.rb-body { display: grid; grid-template-columns: 1fr 380px; height: 560px; }
.rb-canvas { height: 100%; }
.rb-canvas .bx-world { transition: transform 1s cubic-bezier(.45, 0, .2, 1); }
.rb-log { border-left: 1px solid #e9ebee; background: #fbfbfc; display: flex; flex-direction: column; min-height: 0; }
.rb-lh { display: flex; justify-content: space-between; padding: 14px 18px 10px; font-size: 12.5px; color: var(--grey); border-bottom: 1px solid #eff0f2; font-variant-numeric: tabular-nums; }
.rb-log ol { list-style: none; margin: 0; padding: 8px 0 18px; overflow: auto; flex: 1; }
.rb-log li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 6px 18px; font-size: 13px; line-height: 1.45; animation: logIn .35s ease-out both; }
.rb-log li time { font: 400 12px/1.6 var(--mono); color: var(--grey2); }
.rb-log li b { font-weight: 600; }
.rb-log li.ok b { color: var(--green); }
.rb-log li.wt b { color: #c06a14; }
.rb-log li.h { margin-top: 6px; }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } }
.ticks3 { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ticks3 li { font-size: 15.5px; line-height: 1.55; color: var(--grey); letter-spacing: -.015em; padding-top: 18px; border-top: 1px solid var(--line); }
.ticks3 b { color: var(--ink); font-weight: 500; }

/* Bento */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bt { border-radius: 5px; box-shadow: 0 0 0 1px #eeeef0; overflow: hidden; display: flex; flex-direction: column; background: var(--card); }
.bt:not(.dots) .bt-ui { background-color: #f6f6f7; background-image: radial-gradient(circle, #e0e1e4 1.3px, transparent 1.6px); background-size: 24px 24px; }
.bt-add { grid-column: span 2; background-color: var(--card); }
.bt-add .bt-ui { background: transparent; }
.bt-ui { position: relative; height: 310px; overflow: hidden; }
.bt-txt { padding: 22px 26px 28px; background: var(--card); margin-top: auto; }
.bt-txt h3 { font: 500 20px/1.2 var(--disp); letter-spacing: -.03em; margin: 0 0 8px; }
.bt-txt p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--grey); letter-spacing: -.015em; }
.bt-add.dots { background-image: none; }
.bt-add .bt-ui { background-color: #f6f6f7; background-image: radial-gradient(circle, #e0e1e4 1.3px, transparent 1.6px); background-size: 24px 24px; }
.an-node, .an-new { position: absolute; left: 7%; width: 280px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px #e6e7ea, 0 3px 10px -5px rgba(0, 0, 0, .1); padding: 12px; font-size: 14px; }
.an-node { top: 34px; }
.an-node b, .an-new b { display: block; font-weight: 500; letter-spacing: -.01em; }
.an-node small, .an-new small { display: block; color: var(--grey); font-size: 12.5px; margin-top: 2px; }
.bt .bx-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #eceef2; }
.bt .bx-ic .i { width: 16px; height: 16px; }
.bt .bx-ic.violet { background: #eee7ff; color: #7a4ddf; }
.bt .bx-ic.amber { background: #fff1e2; color: #d4731b; }
.an-wire { position: absolute; left: calc(7% + 140px); top: 98px; width: 2px; height: 120px; background: #dfe1e5; }
.an-wire i { position: absolute; inset: 0; background: var(--orange); transform: scaleY(0); transform-origin: top; }
.an-plus { position: absolute; left: calc(7% + 141px); top: 128px; width: 26px; height: 26px; margin-left: -13px; border-radius: 7px; border: 1px solid var(--orange); background: #fff; color: var(--orange); display: grid; place-items: center; cursor: pointer; padding: 0; }
.an-plus .i { width: 14px; height: 14px; }
.an-new { top: 218px; opacity: 0; transform: translateY(6px); }
.menu { position: absolute; left: calc(7% + 316px); top: 30px; width: 290px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px #e3e5e8, 0 18px 40px -16px rgba(0, 0, 0, .28); padding: 6px; font-size: 13.5px; opacity: 0; transform: translateY(6px) scale(.98); transform-origin: top left; }
.menu.open { opacity: 1; transform: none; transition: opacity .2s, transform .25s; }
.m-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 7px; background: #f5f6f7; color: var(--grey); margin-bottom: 4px; }
.m-search span { color: var(--ink); }
.m-search .caret { width: 1.5px; height: 16px; background: var(--ink); margin-left: -6px; animation: blink 1s steps(1) infinite; }
.m-g { font-size: 11.5px; color: var(--grey2); padding: 8px 10px 4px; }
.m-i { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; }
.m-i .bx-ic { width: 28px !important; height: 28px !important; }
.m-i .bx-ic .i { width: 14px !important; height: 14px !important; }
.m-i small { color: var(--grey2); font-size: 12px; }
.m-i.hide { display: none; }
.m-i.act { background: #f1f2f4; }

.aip { position: absolute; left: 22px; right: 22px; top: 26px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px #e6e7ea, 0 6px 16px -10px rgba(0, 0, 0, .14); padding: 14px; font-size: 13.5px; }
.aip-h { display: flex; align-items: center; gap: 10px; }
.aip-h b { font-weight: 500; }
.aip-t { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--grey); }
.aip-q { margin: 12px 0; padding: 10px 12px; background: #f6f7f9; border-radius: 8px; color: var(--ink2); line-height: 1.45; font-size: 13px; }
.aip dl { margin: 0; display: grid; gap: 0; }
.aip dl div { display: flex; justify-content: space-between; padding: 7px 2px; border-top: 1px solid #f0f1f3; }
.aip dt { font: 400 12.5px/1.4 var(--mono); color: var(--grey); }
.aip dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.aip dd.g { color: var(--green); }

.tst { position: absolute; left: 22px; right: 22px; top: 26px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px #e6e7ea, 0 6px 16px -10px rgba(0, 0, 0, .14); padding: 14px; font-size: 13.5px; }
.tst-h { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid #f0f1f3; }
.tst-h span { font-size: 12px; color: var(--grey); }
.tst-h b { font-weight: 500; }
.tst-l { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 8px; }
.tst-l li { display: flex; align-items: center; gap: 10px; }
.tst-l em { margin-left: auto; font: normal 400 12px/1 var(--mono); color: var(--grey); }
.tst-l .d { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.tst-l .d.sk { background: #e3a253; }
.tst-f { display: flex; align-items: center; gap: 7px; background: #effaf5; color: #178562; border-radius: 7px; padding: 8px 10px; font-size: 13px; font-weight: 500; }
.tst-f .i { width: 15px; height: 15px; }

.ver { list-style: none; position: absolute; left: 22px; right: 22px; top: 26px; margin: 0; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px #e6e7ea, 0 6px 16px -10px rgba(0, 0, 0, .14); }
.ver li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 7px; font-size: 13.5px; }
.ver li + li { border-top: 1px solid #f2f3f4; }
.ver li.cur { background: #f6f7f8; }
.ver img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ver b { font-weight: 500; display: block; }
.ver small { color: var(--grey); font-size: 12.5px; display: block; }
.ver em { font-style: normal; color: var(--grey2); font-size: 12.5px; }
.ver .rs { font-size: 12.5px; border: 1px solid var(--ink); border-radius: 6px; padding: 4px 8px; }

.apps { list-style: none; margin: 0; padding: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.apps li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 7px; box-shadow: 0 0 0 1px #e6e7ea; height: 38px; padding: 0 9px; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.apps li .i { width: 15px; height: 15px; }
.apps li i { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.apps li.off i { background: #d0d3d8; }

/* Approvals */
.appr-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.appr-pic { position: relative; border-radius: 5px; overflow: hidden; aspect-ratio: 4 / 5; }
.appr-pic > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.slk { position: absolute; left: 22px; right: 22px; bottom: 22px; background: #fff; border-radius: 10px; padding: 14px 16px 16px; box-shadow: 0 24px 50px -18px rgba(0, 20, 60, .45); font-size: 14px; }
.slk-h { display: flex; align-items: center; gap: 8px; }
.slk-h .mk { width: 26px; height: 26px; border-radius: 6px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.slk-h .mk svg { width: 17px; height: 17px; }
.slk-h .app { font-size: 10px; font-weight: 600; background: #eceef1; color: var(--grey); border-radius: 3px; padding: 1px 4px; }
.slk-h em { font-style: normal; color: var(--grey2); font-size: 12.5px; }
.slk p { margin: 10px 0 8px; line-height: 1.45; }
.slk-n { display: flex; gap: 7px; align-items: flex-start; background: #e2f0fe; border: 1px solid #a9cdf3; color: #1f5fbf; border-radius: 7px; padding: 7px 9px; font-size: 13px; font-weight: 500; }
.slk-n .i { width: 15px; height: 15px; margin-top: 1px; }
.slk-d { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.slk .bx-doc { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 9px 0 4px; border: 1px solid #e7e9ed; border-radius: 6px; background: #f8f9fa; font-size: 12.5px; color: #858b94; }
.slk .bx-doc .o { width: 19px; height: 19px; border-radius: 4px; background: #f6a161; color: #fff; display: grid; place-items: center; }
.slk .bx-doc .o .i { width: 12px; height: 12px; }
.slk-a { display: flex; gap: 8px; margin-top: 12px; }
.sb { height: 32px; line-height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid #dadce0; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.sb.yes { background: #17805f; border-color: #17805f; color: #fff; }
.slk-done { display: none; align-items: center; gap: 7px; margin-top: 12px; height: 32px; color: #17805f; font-weight: 500; font-size: 13.5px; }
.slk-done .i { width: 16px; height: 16px; stroke-width: 2.2; }
.slk.ok .slk-a { display: none; }
.slk.ok .slk-done { display: flex; animation: logIn .35s both; }
.appr-txt .lede { text-align: left; margin-top: 22px; }
.rules { margin-top: 32px; border-radius: 8px; box-shadow: 0 0 0 1px #e9ebee; overflow: hidden; }
.rule { display: grid; grid-template-columns: 1.1fr 1fr 56px; align-items: center; gap: 12px; padding: 13px 16px; font-size: 14.5px; letter-spacing: -.01em; }
.rule + .rule { border-top: 1px solid #f0f1f3; }
.r-c { color: var(--ink2); }
.r-c b { color: var(--ink); font-weight: 600; }
.r-p { display: inline-flex; align-items: center; gap: 8px; }
.r-p img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.r-s { text-align: right; font: 400 12.5px/1 var(--mono); color: var(--grey); }
.plain { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.plain li { position: relative; padding-left: 22px; font-size: 15.5px; color: var(--ink2); letter-spacing: -.015em; }
.plain li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 10px; height: 2px; background: var(--orange); }

/* Story */
.story { position: relative; margin-top: clamp(84px, 10vw, 150px); height: clamp(560px, 54vw, 780px); overflow: hidden; }
.story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.story-in { position: absolute; left: var(--gut); bottom: var(--gut); max-width: 600px; background: #fff; border-radius: 5px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .35); }
.story-big { font: 500 clamp(22px, 2vw, 29px)/1.22 var(--disp); letter-spacing: -.03em; margin: 0; }
.story-sm { margin: 16px 0 0; color: var(--grey); font-size: 16px; letter-spacing: -.015em; }

/* Templates */
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tc { border-radius: 5px; box-shadow: 0 0 0 1px #eeeef0; background: var(--card); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s; }
.tc:hover { box-shadow: 0 0 0 1px #dcdee2, 0 14px 30px -18px rgba(0, 0, 0, .25); }
.tc-pic { aspect-ratio: 16 / 9; overflow: hidden; }
.tc-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tc:hover .tc-pic img { transform: scale(1.03); }
.tc-b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tc-h { display: flex; align-items: center; gap: 10px; }
.tc-h .di { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.tc-h .di .i { width: 15px; height: 15px; }
.tc-h b { font: 500 19px/1 var(--disp); letter-spacing: -.03em; }
.tc-h .ct { margin-left: auto; font-size: 13px; color: var(--grey); }
.tc ul { list-style: none; margin: 0; padding: 0; }
.tc li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #efeff1; font-size: 14px; letter-spacing: -.01em; }
.tc li .ap { margin-left: auto; display: flex; gap: 3px; }
.tc li .ap span { width: 22px; height: 22px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px #e6e7ea; display: grid; place-items: center; }
.tc li .ap .i { width: 12px; height: 12px; }

/* Proof */
.story-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px #eeeef0; background: var(--card); }
.sc-pic { min-height: 420px; }
.sc-pic img { width: 100%; height: 100%; object-fit: cover; }
.sc-txt { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; }
.sc-co { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/1 var(--disp); letter-spacing: -.03em; color: #6c7077; }
.sc-co svg { width: 20px; height: 20px; }
blockquote { margin: 28px 0 32px; font: 500 clamp(22px, 2.05vw, 30px)/1.25 var(--disp); letter-spacing: -.03em; text-wrap: pretty; }
.sc-who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.sc-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sc-who b { display: block; font-weight: 500; }
.sc-who span { font-size: 14px; color: var(--grey); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 48px; }
.stats .st { border-top: 1px solid var(--ink); padding-top: 18px; }
.stats b { font: 500 clamp(40px, 4.2vw, 60px)/1 var(--disp); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stats em { font: 500 clamp(20px, 2vw, 28px)/1 var(--disp); font-style: normal; letter-spacing: -.03em; margin-left: 3px; }
.stats span { display: block; margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--grey); letter-spacing: -.015em; max-width: 17em; }

/* Pricing */
.bill { display: inline-flex; padding: 3px; border-radius: 6px; background: #f2f3f5; }
.bill button { border: 0; background: none; height: 34px; padding: 0 14px; border-radius: 4px; font: 400 13px/1 var(--mono); cursor: pointer; color: var(--grey); }
.bill button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.bill em { font-style: normal; color: var(--green); margin-left: 4px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan { position: relative; border-radius: 5px; box-shadow: 0 0 0 1px #e9ebee; padding: 28px 26px 26px; display: flex; flex-direction: column; background: #fff; }
.plan.feat { box-shadow: 0 0 0 1.5px var(--ink), 0 20px 50px -30px rgba(0, 0, 0, .3); }
.plan-tag { position: absolute; right: 18px; top: 18px; background: var(--ink); color: #fff; font: 400 12px/1 var(--mono); padding: 6px 8px; border-radius: 3px; }
.plan h3 { font: 500 24px/1 var(--disp); letter-spacing: -.035em; margin: 0; }
.pd { margin: 8px 0 22px; color: var(--grey); font-size: 15px; }
.pr { display: flex; align-items: baseline; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid #efeff1; }
.pr b { font: 500 48px/1 var(--disp); letter-spacing: -.05em; }
.pr b.talk { font-size: 40px; }
.pr span { color: var(--grey); font-size: 14px; }
.plan ul { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--ink2); }
.plan li { position: relative; padding-left: 24px; }
.plan li::before { content: ''; position: absolute; left: 1px; top: 6px; width: 11px; height: 6px; border-left: 1.6px solid var(--green); border-bottom: 1.6px solid var(--green); transform: rotate(-45deg); }
.plan .mbtn { margin-top: auto; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.qs details { border-bottom: 1px solid var(--line); }
.qs details:first-child { border-top: 1px solid var(--line); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 500 19px/1.3 var(--disp); letter-spacing: -.025em; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ''; width: 12px; height: 12px; flex: none; background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat; transition: transform .25s; }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs p { margin: -4px 0 22px; color: var(--grey); font-size: 16px; line-height: 1.6; max-width: 40em; letter-spacing: -.012em; }

/* Final */
.final { position: relative; margin-top: clamp(84px, 10vw, 150px); height: clamp(560px, 50vw, 740px); overflow: hidden; color: #fff; }
.final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.final-in { position: relative; z-index: 3; padding: clamp(56px, 7vw, 110px) var(--gut) 0; max-width: 1248px; margin: 0 auto; }
.h-final { font: 500 clamp(40px, 5vw, 76px)/.98 var(--disp); letter-spacing: -.048em; margin: 0; }
.final-in > p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; letter-spacing: -.018em; max-width: 27em; margin: 20px 0 0; text-shadow: 0 0 2px rgba(20, 70, 150, .28), 0 1px 18px rgba(10, 60, 140, .35); }
.h-final { text-shadow: 0 1px 24px rgba(10, 60, 140, .18); }

/* Footer */
.foot { padding: clamp(56px, 6vw, 84px) 0 28px; }
.f-top { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.f-brand p { color: var(--grey); font-size: 15px; margin: 16px 0 0; max-width: 20em; }
.f-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.f-cols h4 { margin: 0 0 14px; font: 500 14px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.f-cols a { display: block; padding: 5px 0; font-size: 15px; color: var(--grey); }
.f-cols a:hover { color: var(--ink); }
.f-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--grey); }

/* Mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 60; background: #fff; padding: 96px 24px 32px; display: flex; flex-direction: column; }
.sheet[hidden] { display: none; }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet li a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font: 500 26px/1 var(--disp); letter-spacing: -.035em; }
.sheet-a { margin-top: auto; display: grid; gap: 10px; }
body.sheet-open .nav { position: fixed; left: var(--fr); right: var(--fr); top: var(--fr); padding: 0 var(--gut); z-index: 61; color: var(--ink); }
body.sheet-open .nav .brand .mark { background: var(--ink); }
body.sheet-open .nav .brand .mark svg { fill: #fff; }
body.sheet-open .burger { background: #f2f3f5; }

.ariadne { position: fixed; left: 14px; bottom: 14px; z-index: 50; font: 500 12.5px/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: rgba(20, 22, 26, .88); color: #fff; letter-spacing: .01em; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); opacity: .92; }
.ariadne b { font-weight: 600; color: #ff8a3d; }

/* Responsive */
@media (max-width: 1180px) {
  .hero-win .bx-body { grid-template-columns: 1fr 280px; }
  .rb-body { grid-template-columns: 1fr 320px; }
}
@media (max-width: 1024px) {
  .links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .burger { display: block; }
  .acts .mbtn.light { display: none; }
  .uc-grid, .bento-grid { grid-template-columns: 1fr 1fr; }
  .uc-fin, .uc-sales, .uc-ppl { grid-column: 1 / -1; }
  .uc-ops, .uc-sup { grid-column: span 1; }
  .bt-add { grid-column: 1 / -1; }
  .bt-apps { grid-column: 1 / -1; }
  .apps { grid-template-columns: repeat(3, 1fr); }
  .tpl-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .rb-body { grid-template-columns: 1fr; height: auto; }
  .rb-canvas { height: 420px; }
  .rb-log { border-left: 0; border-top: 1px solid #e9ebee; height: 300px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .hero-bg img { width: 132%; max-width: none; }
}
@media (max-width: 860px) {
  .hero-win .bx-body { grid-template-columns: 1fr; }
  .hero-win .bx-insp { display: none; }
  .sec-head.split { flex-direction: column; align-items: flex-start; gap: 18px; }
  .lede { text-align: left; }
  .appr-grid, .faq-grid, .story-card { grid-template-columns: minmax(0, 1fr); }
  .sc-pic { min-height: 260px; aspect-ratio: 16 / 9; }
  .plans { grid-template-columns: 1fr; max-width: 520px; }
  .ticks3 { grid-template-columns: 1fr; gap: 0; }
  .ticks3 li { padding: 14px 0; }
  .f-top { grid-template-columns: 1fr; }
  .f-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .acts .mbtn.dark { display: none; }
  .hero-bg img:first-child { height: 100%; object-fit: cover; object-position: 30% 50%; margin-top: 0; }
  .hero-bg .mir { display: none; }
  .hero-copy { padding-top: 26px; }
  .hero-sub { font-size: 17px; }
  .hero-cta { gap: 0; }
  .hero-chip, .hero-line { display: none; }
  .hero-win { height: 400px; margin-top: 40px; border-radius: 8px 8px 0 0; }
  .hero-win .bx-win { grid-template-columns: 1fr; }
  .hero-win .bx-rail { display: none; }
  .hero-win .bx-crumb > :not(.wfname):not(.bx-status) { display: none; }
  .hero-win .bx-crumb { justify-content: flex-start; font-size: 13px; }
  .hero-win .bx-zoomsel, .hero-win .bx-btn.ghost, .hero-win .bx-brand { display: none; }
  .hero-win .bx-cbar > div:last-child { display: none; }
  .uc-grid, .bento-grid, .tpl-grid { grid-template-columns: 1fr; }
  .uc-ops, .uc-sup { grid-column: 1 / -1; }
  .uc-art { height: 260px; }
  .uc-sales .uc-art { grid-template-columns: 1fr; height: auto; }
  .sales-l { padding: 28px 0 8px; }
  .trend { height: 270px; margin: 18px 0 0 18px; }
  .uc-txt { padding: 22px 20px 28px; }
  .chain { transform: translateX(-50%) scale(.82); }
  .ppl { transform: translateX(-50%) scale(.6); transform-origin: 50% 0; top: 56px; }
  .apps { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .rule { grid-template-columns: 1fr auto; }
  .rule .r-s { display: none; }
  .story { height: 640px; }
  .story > img { object-position: 30% 50%; }
  .story-in { right: var(--gut); }
  .rb-top { flex-wrap: wrap; height: auto; padding: 12px 12px 12px 14px; gap: 8px 12px; }
  .rb-t { width: 100%; }
  .rb-st { margin-left: 0; }
  .rb-top .mbtn { margin-left: auto; }
  .rb-canvas { height: 340px; }
  .final { height: 620px; }
  .final-cta .hero-chip { display: none; }
  .final > img { object-position: 64% 50%; }
  .ariadne { position: static; display: table; margin: 0 auto 24px; }
  .foot { padding-bottom: 8px; }
  .f-bot { flex-direction: column; gap: 6px; }
}
@media (max-width: 420px) {
  .h-hero { font-size: 39px; }
  .h2 { font-size: 31px; }
  .an-node, .an-new { left: 16px; width: 230px; }
  .an-wire { left: 131px; }
  .an-plus { left: 132px; }
  .menu { left: 60px; width: 250px; }
  .stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}