/* OKHBOT V2.6.21 – shared public-page geometry and complete fast-websites rebuild.
   The homepage visual geometry is the source of truth; no business rules changed. */
:root{--ok21-paper:#faf9ff;--ok21-paper2:#f7f6ff;--ok21-violet:#6656e9;--ok21-ink:#22213d;--ok21-mint:#50cfaa;--ok21-muted:#74718d;--ok21-content:1280px;--ok21-gutter:72px}
body.ok17-public-active,body.ok264-home-active{background:var(--ok21-paper)}
body.ok17-public-active .site,body.ok264-home-active .site{background:var(--ok21-paper)}
body.ok17-public-active .wrap{width:min(var(--ok21-content),calc(100% - var(--ok21-gutter)))}
body.ok17-public-active .header,body.ok264-home-active .header{background:rgba(250,249,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(105,86,219,.09);box-shadow:none}
body.ok17-public-active .header-inner{height:84px;transition:height .25s}
body.ok17-public-active .header .brand img{max-height:58px;object-fit:contain}
body.ok17-public-active .header .desktop-links{gap:30px}
body.ok17-public-active .header .desktop-links a{font-size:16px;font-weight:800}
body.ok17-public-active .header .desktop-links a.is-current{color:var(--ok21-violet)}
body.ok17-public-active .header .header-actions .btn{background:var(--ok21-violet);border-color:var(--ok21-violet);border-radius:12px}
body.ok17-public-active .footer,body.ok264-home-active .site>.footer{background:linear-gradient(180deg,#f8f6ff,#f1effe);border-top:0}
body.ok17-public-active .ok261-public-page,body.ok17-public-active .ok17-designers-page,body.ok17-public-active .ok17-simple-page{background:var(--ok21-paper)}
/* Match homepage hero backdrop/edge rhythm on all public pages; content retains its own visual language. */
body.ok17-public-active .ok20-design-hero{background:linear-gradient(180deg,#faf9ff 0%,#f7f6ff 100%)}
body.ok17-public-active .ok20-hero-grid{width:min(var(--ok21-content),calc(100% - var(--ok21-gutter)))}
body.ok17-public-active .ok17-designers-page{width:min(var(--ok21-content),calc(100% - var(--ok21-gutter)));padding-inline:0}
body.ok17-public-active .ok17-simple-page{width:min(var(--ok21-content),calc(100% - var(--ok21-gutter)));padding-inline:0}
/* Header-to-hero seamless paper and animated ambient tone. */
.ok21-web-page{--ok21-hero-progress:0;background:var(--ok21-paper);color:var(--ok21-ink);overflow:clip;position:relative}
.ok21-web-page :is(h1,h2,h3){letter-spacing:-.045em;color:var(--ok21-ink)}
.ok21-web-page em{font-style:normal;color:var(--ok21-violet)}
.ok21-web-page :is(button,a):focus-visible{outline:3px solid #6356e6;outline-offset:4px}
.ok21-hero{min-height:650px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#faf9ff 0%,#f7f6ff 100%);padding:78px 0 82px}
.ok21-hero-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 460px 380px at 17% 52%,rgba(123,182,246,.18),transparent 80%),radial-gradient(ellipse 400px 310px at 82% 16%,rgba(194,186,255,.23),transparent 82%);background-size:115% 125%;animation:ok21-ambient 18s ease-in-out infinite alternate}
.ok21-hero-pattern{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;background-image:radial-gradient(#b2a7f6 .85px,transparent .85px);background-size:38px 38px;animation:ok21-pattern 28s linear infinite}
@keyframes ok21-pattern{to{background-position:76px 38px}}
@keyframes ok21-ambient{0%{background-position:0% 0%}100%{background-position:100% 25%}}
.ok21-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:5%;min-height:530px}
.ok21-hero-copy{position:relative;z-index:4;transform:translate3d(0,calc(var(--ok21-hero-progress)*-35px),0)}
.ok21-hero-copy h1{font-size:clamp(48px,5.9vw,86px);font-weight:900;line-height:1.27;margin:0 0 20px}
.ok21-hero-copy h1>span{display:block;animation:ok21-type-enter .75s cubic-bezier(.2,.8,.2,1) backwards}
.ok21-hero-copy h1>span:nth-child(2){animation-delay:.14s}.ok21-hero-copy h1>span:nth-child(3){animation-delay:.28s}
@keyframes ok21-type-enter{from{transform:translateY(26px) rotate(1deg);opacity:0}to{transform:translateY(0);opacity:1}}
.ok21-hero-promised{font-size:.72em;display:inline-flex!important;gap:.22em;align-items:center;width:max-content;max-width:100%;white-space:nowrap;color:#282540;margin-top:12px}
.ok21-hero-promised b{background:var(--ok21-mint);border-radius:90px;padding:1px 17px 9px;color:#3432e8;font-weight:900;transform:rotate(-3deg);display:inline-block;box-shadow:0 11px 24px rgba(61,160,140,.1)}
.ok21-hero-copy p{font-size:17px;color:#67657e;max-width:560px;line-height:2;margin:0 0 25px}
.ok21-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.ok21-btn{min-height:51px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;border-radius:999px;border:1px solid transparent;font-size:15px;font-weight:800;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s}
.ok21-btn:hover{transform:translateY(-4px)}.ok21-btn span{font-size:21px;font-weight:400;line-height:1}
.ok21-btn.main{background:var(--ok21-violet);color:#fff;box-shadow:0 13px 25px rgba(80,68,193,.15)}
.ok21-btn.outline{background:rgba(255,255,255,.78);border-color:#dedaf3;color:#28263f}
.ok21-hero-visual{position:relative;height:445px;min-width:0;isolation:isolate;transform:translate3d(calc(var(--ok21-hero-progress)*-32px),calc(var(--ok21-hero-progress)*36px),0) scale(calc(1 - var(--ok21-hero-progress)*.055));will-change:transform}
.ok21-hero-visual:before{content:'';position:absolute;inset:25px 12px 34px 0;background:linear-gradient(135deg,#dbe7ff,#d9d4ff);border-radius:45px;transform:rotate(-8deg);z-index:-1}
.ok21-hero-window{position:absolute;inset:28px 6% 20px 5%;transform:rotate(-4deg);filter:drop-shadow(0 28px 27px rgba(36,43,97,.14));animation:ok21-float 7.4s ease-in-out infinite}
.ok21-hero-window>.ok261-site-browser{height:100%;min-height:0!important;border-radius:20px;max-width:100%;transform:none!important}
.ok21-hero-phone{position:absolute;left:-3%;bottom:-7px;width:29%;height:68%;transform:rotate(8deg);filter:drop-shadow(0 22px 16px rgba(43,38,88,.21));z-index:2;animation:ok21-float-phone 6.6s 1s ease-in-out infinite}
.ok21-hero-phone>.ok261-site-browser{height:100%;min-height:0!important;max-width:100%;border-radius:24px;overflow:hidden;transform:none!important}
.ok21-hero-float{position:absolute;right:4%;top:0;z-index:4;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #eee9ff;border-radius:17px;padding:10px 14px;box-shadow:0 14px 29px rgba(58,52,126,.13);font-size:12px;color:#464362;font-weight:800;animation:ok21-float 8s 1.1s ease-in-out infinite}
.ok21-hero-float b{display:grid;place-items:center;background:#e4f7ef;color:#169c7e;border-radius:50%;width:24px;height:24px}
@keyframes ok21-float{0%,100%{translate:0 0}50%{translate:0 -15px}}
@keyframes ok21-float-phone{0%,100%{translate:0 0}50%{translate:0 -22px}}
/* Interactive 1–3 steps, line fill driven by the viewport (reverses on scroll up). */
.ok21-steps{padding:86px 0 92px;background:#faf9ff;--ok21-steps-progress:0}
.ok21-centered{text-align:center;max-width:850px;margin:0 auto 36px}
.ok21-centered h2,.ok21-showroom h2,.ok21-section-heading h2,.ok21-faq h2{font-size:clamp(37px,4.5vw,62px);font-weight:900;line-height:1.25;margin:0 0 10px}
.ok21-centered p,.ok21-showroom-heading p,.ok21-section-heading p,.ok21-faq-layout>div>p{font-size:16px;line-height:1.95;color:#77738d;margin:0}
.ok21-step-progress{position:relative;max-width:940px;margin:0 auto 22px;padding:0 4px 6px}
.ok21-step-rail{position:absolute;top:22px;left:7%;right:7%;height:3px;background:#dcd8f0;border-radius:99px;overflow:hidden}
.ok21-step-fill{height:100%;width:calc(var(--ok21-steps-progress)*100%);display:block;background:linear-gradient(90deg,#4ecea8,#6656e9);transition:width .07s linear}
.ok21-step-numbers{display:flex;justify-content:space-between;max-width:100%;position:relative;z-index:1;padding-inline:3%}
.ok21-step-numbers>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid #eae6f8;color:#88839e;font:800 20px/1 Inter,Arial;box-shadow:0 6px 18px rgba(67,51,134,.05);transition:background .2s,color .2s}
.ok21-step-numbers>span.is-active{background:#6656e9;border-color:#6656e9;color:#fff}
.ok21-step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.ok21-step-grid article{text-align:center;padding:12px 25px 0;min-width:0}
.ok21-step-grid h3{font-size:25px;line-height:1.35;margin:0 0 10px}
.ok21-step-grid p{font-size:14px;color:#77748e;line-height:1.86;margin:0 auto 24px;max-width:320px}
.ok21-step-art{width:120px;height:92px;border-radius:24px;position:relative;margin:0 auto;box-shadow:0 13px 24px rgba(65,51,136,.09);background:linear-gradient(145deg,#e1dcff,#f7f5ff);display:grid;place-items:center;transform:translate3d(0,calc((1 - var(--ok21-steps-progress)) * 15px),0)}
.ok21-step-art i{display:block;position:absolute;width:68px;height:46px;border-radius:10px;top:19px;right:16px;background:#fff;box-shadow:0 9px 17px #8272da24}
.ok21-step-art b{display:block;position:absolute;width:35px;height:6px;top:32px;right:25px;background:#b7aeec;border-radius:99px;box-shadow:0 12px #ddd7f8}
.ok21-step-art span{position:absolute;bottom:19px;left:19px;width:31px;height:16px;border-radius:7px;background:#6756e9}
.ok21-step-art.art-info{background:linear-gradient(145deg,#e0f5ed,#e8f1ff)}
.ok21-step-art.art-info i{width:57px;height:55px;right:26px}
.ok21-step-art.art-info span{background:#27b695}
.ok21-step-art.art-ready{background:linear-gradient(145deg,#dbf1ff,#e5ddff)}
.ok21-step-art.art-ready i{position:relative;top:auto;right:auto;display:grid;place-items:center;border-radius:50%;background:#51cfa9;color:#fff;font-size:28px;width:54px;height:54px;font-style:normal}
.ok21-step-art.art-ready b,.ok21-step-art.art-ready span{display:none}
/* Large teal product-preview band, inspired by user-provided layout. */
.ok21-showroom{--ok21-show-progress:0;padding:74px 0 66px;background:#d6f6eb;position:relative;overflow:hidden}
.ok21-showroom:before{content:'';position:absolute;left:-90px;top:-130px;width:470px;height:470px;border:65px solid rgba(255,255,255,.28);border-radius:50%;pointer-events:none;transform:translateY(calc(var(--ok21-show-progress)*65px))}
.ok21-showroom-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:26px;position:relative;z-index:1}
.ok21-showroom-heading h2{margin-bottom:7px}
.ok21-showroom-device{display:inline-flex;gap:5px;flex-shrink:0;border-radius:999px;padding:5px;background:rgba(255,255,255,.68);border:1px solid rgba(74,179,153,.2)}
.ok21-showroom-device button,.ok21-lang button{border:0;background:transparent;padding:8px 15px;border-radius:99px;color:#44455b;font-size:13px;font-weight:800}
.ok21-showroom-device button.active,.ok21-lang button.active{background:#6756e9;color:white}
.ok21-showroom-stage{height:420px;position:relative;display:grid;grid-template-columns:60px minmax(0,1fr) 60px;align-items:center;gap:16px}
.ok21-arrow{width:52px;height:52px;border:1px solid rgba(46,116,99,.2);border-radius:50%;background:rgba(255,255,255,.75);color:#315d64;font-size:25px;display:grid;place-items:center;cursor:pointer;transition:transform .2s}
.ok21-arrow:hover{transform:scale(1.08);background:#fff}
.ok21-live-preview{height:100%;min-width:0;max-width:930px;width:100%;margin:auto;display:flex;align-items:center;justify-content:center;transform:translate3d(0,calc((1 - var(--ok21-show-progress))*35px),0) scale(calc(.92 + var(--ok21-show-progress)*.08));will-change:transform}
.ok21-live-preview>.ok261-site-browser{min-height:0!important;height:405px;width:min(100%,910px);border-radius:17px;box-shadow:0 29px 48px rgba(38,78,90,.16);transform:none!important}
.ok21-live-preview.phone>.ok261-site-browser{max-width:245px;height:395px;min-height:0!important;width:245px;border-radius:24px;flex:0 0 245px}
.ok21-showroom-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:950px;margin:24px auto 0}
.ok21-showroom-bottom h3{font-size:27px;margin:0 0 2px}
.ok21-showroom-bottom p{font-size:14px;color:#5d867a;margin:0}
/* Template gallery and filter chips. */
.ok21-template-section{padding:100px 0 104px;background:#faf9ff}
.ok21-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
.ok21-section-heading p{max-width:575px}
.ok21-all-button{background:transparent;border:0;color:#6555dc;font-size:15px;font-weight:800;white-space:nowrap;padding:7px}
.ok21-filter-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.ok21-filter-row button{background:#fff;color:#5b567b;border:1px solid #e7e3f7;border-radius:999px;padding:8px 17px;font-size:14px;font-weight:800;transition:background .2s,color .2s}
.ok21-filter-row button.active,.ok21-filter-row button:hover{background:#6756e9;border-color:#6756e9;color:white}
.ok21-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ok21-template-card{min-width:0;padding:0;background:#fff;border-radius:26px;overflow:hidden;border:1px solid #e7e3f8;box-shadow:0 17px 36px rgba(45,33,126,.075);text-align:right;transition:transform .22s,box-shadow .22s}
.ok21-template-card:hover{box-shadow:0 28px 48px rgba(45,33,126,.13);transform:translateY(-6px)!important}
.ok21-template-visual{height:216px;overflow:hidden;background:linear-gradient(135deg,#eeeaff,#dceafa);display:flex;align-items:flex-start;padding:16px 15px 0}
.ok21-template-visual>.ok261-site-browser{min-height:380px!important;width:100%;border-radius:11px 11px 0 0;transform:none!important;box-shadow:0 12px 30px rgba(34,29,77,.11)}
.ok21-template-card>span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px}
.ok21-template-card strong{font-size:18px;color:#302b4b}
.ok21-template-card i{font-style:normal;font-size:22px;color:#6756e9}
/* Pricing uses real plan data. */
.ok21-pricing{padding:100px 0 95px;background:linear-gradient(180deg,#f7f5ff,#f3f1ff)}
.ok21-lang{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 28px}
.ok21-lang button{border:1px solid #e9e4fa;background:#fff}
.ok21-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.ok21-plan{background:#fff;border:1px solid #e5e0f8;border-radius:27px;overflow:hidden;box-shadow:0 16px 35px rgba(52,40,129,.06);display:flex;flex-direction:column;min-width:0}
.ok21-plan.featured{border-color:#8d7ff1;box-shadow:0 20px 44px rgba(79,59,173,.13)}
.ok21-plan-art{height:155px;display:flex;align-items:center;gap:17px;position:relative;overflow:hidden;padding:22px 26px;background:linear-gradient(125deg,#e4dcff,#f5f0ff)}
.ok21-plan:nth-child(2) .ok21-plan-art{background:linear-gradient(125deg,#d9f5ed,#e2edff)}
.ok21-plan:nth-child(3) .ok21-plan-art{background:linear-gradient(125deg,#e1dafa,#dceaff)}
.ok21-plan-art>strong{font:900 86px/1 Inter,Arial;color:#6756e9;letter-spacing:-7px;z-index:2}
.ok21-plan-art>span{font-size:18px;font-weight:800;color:#52487f;z-index:2}
.ok21-plan-art>i{position:absolute;width:185px;height:185px;border:30px solid rgba(255,255,255,.55);border-radius:50%;left:-60px;top:-75px}
.ok21-plan-body{padding:23px 25px 24px;display:flex;flex-direction:column;flex:1}
.ok21-plan-body h3{font-size:27px;line-height:1.3;margin:0 0 7px}
.ok21-plan-price{font-size:27px;font-weight:900;color:#6756e9;line-height:1.5;margin:5px 0 8px}
.ok21-plan-body>p{font-size:14px;line-height:1.8;color:#77718c;min-height:48px;margin-bottom:16px}
.ok21-plan-features{display:grid;gap:9px;flex:1;align-content:start;margin-bottom:22px}
.ok21-plan-features span{font-size:13px;color:#57526f;line-height:1.7}
.ok21-plan-body>button{display:flex;justify-content:space-between;align-items:center;border:0;background:#6656e9;border-radius:13px;color:#fff;padding:13px 17px;font-weight:800;font-size:15px;margin-top:auto}
.ok21-plan-body>button span{font-size:20px}
.ok21-plan-note{max-width:860px;margin:23px auto 0;text-align:center;color:#76718e;font-size:13px;line-height:1.95}
/* Calm FAQ ending, seamlessly into shared footer. */
.ok21-faq{padding:95px 0 110px;background:#faf9ff}
.ok21-faq-layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:start;gap:55px}
.ok21-faq-items{display:grid;gap:11px}
.ok21-faq-items details{background:#fff;border:1px solid #e8e4f6;border-radius:17px;overflow:hidden}
.ok21-faq-items summary{list-style:none;cursor:pointer;padding:18px 19px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:16px;font-weight:800;color:#2c2848}
.ok21-faq-items summary::-webkit-details-marker{display:none}
.ok21-faq-items summary b{font-size:24px;color:#6756e9;transition:transform .2s}
.ok21-faq-items details[open] summary b{transform:rotate(45deg)}
.ok21-faq-items details p{margin:0;padding:16px 19px 21px;border-top:1px solid #f0ecf9;color:#6c6681;line-height:1.95;font-size:14px}
/* Responsive: exact home wrap sizes and responsive shared hero rhythm. */
@media(max-width:1040px){
 .ok21-hero-grid{grid-template-columns:1.05fr .95fr;gap:25px}
 .ok21-hero-copy h1{font-size:clamp(44px,6vw,69px)}
 .ok21-hero-visual{height:360px}
 .ok21-hero-phone{height:65%}
 .ok21-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ok21-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
 :root{--ok21-gutter:48px}
 .ok21-hero-grid{grid-template-columns:1fr;gap:25px}
 .ok21-hero{padding:55px 0 65px}
 .ok21-hero-copy{max-width:760px}
 .ok21-hero-visual{width:min(100%,640px);margin:0 auto;height:400px}
 .ok21-steps{padding:65px 0 75px}
 .ok21-showroom-stage{height:350px;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px}
 .ok21-live-preview>.ok261-site-browser{height:340px}
 .ok21-live-preview.phone>.ok261-site-browser{height:330px}
 .ok21-step-grid article{padding:10px 8px}
}
@media(max-width:760px){
 body.ok17-public-active .header-inner{height:70px}
 .ok21-hero-copy h1{font-size:clamp(36px,8.6vw,60px)}
 .ok21-hero-copy p{font-size:15px}
 .ok21-step-grid{grid-template-columns:1fr;gap:22px}
 .ok21-step-grid article{display:grid;grid-template-columns:1fr auto;column-gap:18px;align-items:center;text-align:right;background:rgba(255,255,255,.67);border-radius:19px;padding:20px;border:1px solid #efebfa}
 .ok21-step-grid h3{margin-bottom:0;font-size:23px}.ok21-step-grid p{grid-row:2;max-width:none;margin:6px 0 0;font-size:14px}.ok21-step-art{grid-column:2;grid-row:1/span 2;width:95px;height:79px}
 .ok21-showroom-heading,.ok21-section-heading{display:block}
 .ok21-showroom-device{margin-top:17px}
 .ok21-section-heading .ok21-all-button{margin-top:15px}
 .ok21-faq-layout{grid-template-columns:1fr;gap:20px}
 .ok21-pricing,.ok21-template-section,.ok21-faq{padding-block:74px}
}
@media(max-width:540px){
 :root{--ok21-gutter:32px}
 .ok21-hero{padding:40px 0 50px}
 .ok21-hero-grid{gap:12px}
 .ok21-hero-copy h1{font-size:clamp(34px,9.8vw,49px)}
 .ok21-hero-promised b{padding:1px 10px 5px}
 .ok21-hero-visual{height:257px;width:min(100%,390px);margin:18px auto 0}
 .ok21-hero-window{inset:12px 7% 5px 2%}
 .ok21-hero-phone{height:70%;width:29%;bottom:-15px;left:0}
 .ok21-hero-float{right:0;top:-7px;padding:6px 8px;font-size:9px;border-radius:10px}
 .ok21-hero-float b{height:18px;width:18px}
 .ok21-hero-actions{gap:8px}
 .ok21-btn{min-height:44px;font-size:12px;padding:10px 13px;gap:9px}
 .ok21-centered h2,.ok21-showroom h2,.ok21-section-heading h2,.ok21-faq h2{font-size:clamp(31px,8vw,43px)}
 .ok21-centered p,.ok21-showroom-heading p,.ok21-section-heading p{font-size:14px}
 .ok21-steps{padding:55px 0 61px}
 .ok21-step-grid article{padding:14px 13px;gap:10px}
 .ok21-step-grid h3{font-size:20px}.ok21-step-grid p{font-size:12px}
 .ok21-step-art{width:80px;height:70px}
 .ok21-showroom{padding:57px 0 58px}
 .ok21-showroom-stage{grid-template-columns:34px minmax(0,1fr) 34px;gap:3px;height:245px}
 .ok21-arrow{height:32px;width:32px;font-size:19px}
 .ok21-live-preview>.ok261-site-browser{height:226px;min-height:0!important}
 .ok21-live-preview.phone>.ok261-site-browser{width:145px!important;max-width:145px;flex:0 0 145px;height:235px}
 .ok21-showroom-bottom{flex-direction:column;align-items:flex-start;gap:13px}
 .ok21-showroom-bottom h3{font-size:21px}
 .ok21-template-grid,.ok21-plan-grid{grid-template-columns:1fr}
 .ok21-template-visual{height:215px}
 .ok21-plan-art{height:125px}
 .ok21-plan-art>strong{font-size:70px}
 .ok21-filter-row{gap:6px}
 .ok21-filter-row button{font-size:12px;padding:7px 11px}
}
@media(prefers-reduced-motion:reduce){
 .ok21-web-page *,.ok21-web-page *::before,.ok21-web-page *::after{animation:none!important;transition:none!important}
 .ok21-hero-copy,.ok21-hero-visual,.ok21-live-preview,.ok21-step-art{transform:none!important}
 .ok21-hero-window,.ok21-hero-phone,.ok21-hero-float{animation:none!important}
}
/* The same clean public header as the approved homepage; demo role rail remains available only inside workspaces. */
body.ok17-public-active .prototype-rail{display:none!important}
body.ok17-public-active .ok20-design-hero{padding-block:78px 82px}
body.ok17-public-active .ok20-portfolio,body.ok17-public-active .ok20-pricing,body.ok17-public-active .ok20-faq{scroll-margin-top:85px}
body.ok17-public-active .ok21-web-page :is(.ok21-steps,.ok21-showroom,.ok21-template-section,.ok21-pricing,.ok21-faq){scroll-margin-top:82px}
@media(max-width:760px){body.ok17-public-active .ok20-design-hero{padding-block:54px 62px}}
@media(max-width:540px){body.ok17-public-active .ok20-design-hero{padding-block:40px 50px}}