/* V2.6.20: design subscriptions reauthored around the supplied editorial reference.
   Home stays untouched; marketing page shares its ivory/lavender rhythm. */
body.ok17-public-active .header{background:rgba(249,248,255,.94);border-bottom:1px solid rgba(104,87,213,.08);backdrop-filter:blur(18px)}
.ok20-page{--ink20:#25233c;--violet20:#6756eb;--mint20:#4ccea5;--paper20:#faf9ff;background:#faf9ff;color:var(--ink20);overflow-x:clip}
.ok20-page :is(h1,h2,h3){letter-spacing:-.038em;color:var(--ink20)}
.ok20-page em{color:var(--violet20);font-style:normal}
.ok20-page button:focus-visible{outline:3px solid var(--violet20);outline-offset:4px}
.ok20-design-hero{position:relative;overflow:hidden;isolation:isolate;min-height:680px;padding:85px 0 85px;--ok20-scroll:0;background:linear-gradient(180deg,#faf9ff 0%,#f7f6ff 100%)}
.ok20-hero-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 460px 360px at 16% 45%,rgba(192,198,255,.30),transparent 73%),radial-gradient(ellipse 430px 330px at 80% 5%,rgba(212,207,255,.18),transparent 75%);background-size:120% 120%;animation:ok20-glow-move 16s ease-in-out infinite alternate}
@keyframes ok20-glow-move{from{background-position:0% 10%}to{background-position:100% 60%}}
.ok20-hero-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(250px,.8fr);gap:24px;align-items:center;min-height:550px}
.ok20-hero-copy{position:relative;z-index:3;transform:translate3d(0,calc(var(--ok20-scroll)*-25px),0)}
.ok20-hero-copy h1{font-weight:900;font-size:clamp(50px,6.1vw,96px);line-height:1.21;margin:0 0 33px;white-space:normal}
.ok20-hero-copy h1>span{display:block;width:max-content;max-width:100%;transform-origin:right center}
.ok20-hero-copy h1>span:nth-child(1){animation:ok20-hero-enter .9s .12s backwards}
.ok20-hero-copy h1>span:nth-child(2){animation:ok20-hero-enter .9s .25s backwards}
.ok20-hero-copy h1>span:nth-child(3){animation:ok20-hero-enter .9s .42s backwards}
.ok20-hero-copy h1>span:nth-child(4){animation:ok20-hero-enter .9s .56s backwards}
@keyframes ok20-hero-enter{from{opacity:0;transform:translate3d(0,30px,0) rotate(-1deg)}to{opacity:1;transform:translate3d(0,0,0) rotate(0)}}
.ok20-green-highlight{color:#3a24eb!important;display:table!important;position:relative;padding:0px 25px 7px;background:#51cfa6;border-radius:999px;transform:rotate(-2deg);box-shadow:0 12px 22px rgba(32,133,102,.11);font-size:.89em;line-height:1.2;animation:ok20-highlight-in .9s .35s backwards!important}
@keyframes ok20-highlight-in{from{opacity:0;transform:translateY(16px) rotate(-8deg) scale(.83)}to{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}}
.ok20-hero-note{font-size:14px;line-height:2;color:#77748d;max-width:590px;margin:20px 0 0}
.ok20-hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ok20-button{border:0;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;border-radius:999px;padding:13px 24px;color:white;font-weight:800;font-size:16px;min-height:54px;transition:transform .25s,box-shadow .25s;box-shadow:0 14px 26px rgba(30,38,54,.08)}
.ok20-button:hover{transform:translateY(-4px);box-shadow:0 20px 30px rgba(30,38,54,.14)}
.ok20-button>span{font-size:20px;font-weight:400}
.ok20-orange-button{background:#ff914e}.ok20-green-button{background:#03a88c}
.ok20-hero-graphics{position:relative;width:100%;aspect-ratio:1;min-height:350px;transform:translate3d(calc(var(--ok20-scroll)*-20px),calc(var(--ok20-scroll)*27px),0) rotate(calc(var(--ok20-scroll)*-5deg))}
.ok20-hex-ring{width:100%;height:auto;position:absolute;inset:0;transform:rotate(-12deg);animation:ok20-hex-float 8s ease-in-out infinite;filter:drop-shadow(0 24px 38px rgba(92,158,239,.11))}
@keyframes ok20-hex-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -15px;rotate:4deg}}
.ok20-hex-spark{width:20px;height:20px;border-radius:50%;position:absolute;background:#6755ef;box-shadow:0 0 0 12px rgba(103,85,239,.1);animation:ok20-hex-float 6s -2s infinite ease-in-out}
.ok20-hex-spark.spark-one{top:17%;left:18%}.ok20-hex-spark.spark-two{bottom:18%;right:17%;width:11px;height:11px;background:#49cfa8}
.ok20-hero-cursor{position:absolute;left:6%;bottom:3%;font-size:92px;font-weight:900;color:#242337;text-shadow:5px 5px 0 white;transform:rotate(-12deg);animation:ok20-cursor 5s ease-in-out infinite}
@keyframes ok20-cursor{0%,100%{translate:0 0}50%{translate:14px -14px}}
.ok20-small-glass{position:absolute;width:90px;height:90px;left:-3%;top:14%;border-radius:25px;background:rgba(255,255,255,.78);display:grid;place-items:center;transform:rotate(-12deg);box-shadow:0 20px 35px rgba(106,94,175,.12);backdrop-filter:blur(6px)}
.ok20-small-glass span{font-size:50px;color:#6658e8}
.ok20-design-types{position:relative;background:linear-gradient(180deg,#f7f6ff 0%,#faf9ff 100%);padding:76px 0 94px;overflow:hidden}
.ok20-section-title{text-align:center;font-size:clamp(35px,4.55vw,65px);line-height:1.25;max-width:800px;margin:0 auto 39px}
.ok20-section-title em{display:block}
.ok20-type-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px 12px;max-width:1050px;margin:0 auto;padding:10px 5px}
.ok20-type-pill{--pill-bg:#6455ff;--pill-x:0px;--pill-y:0px;--ok20-drift:0;position:relative;appearance:none;background:var(--pill-bg);border:none;color:#fff;white-space:nowrap;display:inline-flex;gap:13px;align-items:center;justify-content:center;border-radius:120px;font-size:clamp(16px,2vw,26px);font-weight:800;padding:10px 28px;min-height:56px;box-shadow:0 8px 18px rgba(50,37,135,.075);transform:translate3d(var(--pill-x),calc(var(--pill-y) + var(--ok20-shift,0px)),0);transition:box-shadow .2s,filter .2s;animation:ok20-pill-breathe 5s ease-in-out infinite alternate;animation-delay:calc(var(--pill-index,0)*-300ms)}
.ok20-type-pill i{font-size:19px;font-style:normal;line-height:1;opacity:0;max-width:0;overflow:hidden;transition:max-width .2s,opacity .2s}
.ok20-type-pill:hover{filter:brightness(1.08);box-shadow:0 18px 30px rgba(50,37,135,.16)}.ok20-type-pill:hover i{opacity:1;max-width:26px}
.ok20-type-pill:nth-child(even){--pill-y:-5px}.ok20-type-pill:nth-child(3n){--pill-y:7px}.ok20-type-pill:nth-child(4n){--pill-x:-5px}
.ok20-type-pill.pill-0{--pill-bg:#653dff}.ok20-type-pill.pill-1{--pill-bg:#f3269c}.ok20-type-pill.pill-2{--pill-bg:#05a889}.ok20-type-pill.pill-3{--pill-bg:#3d40ff}.ok20-type-pill.pill-4{--pill-bg:#ff914e}.ok20-type-pill.pill-5{--pill-bg:#74bdfb}.ok20-type-pill.pill-6{--pill-bg:#a8ce33}.ok20-type-pill.pill-7{--pill-bg:#bc8ee8}
@keyframes ok20-pill-breathe{0%,100%{border-radius:999px}50%{border-radius:36px 55px 35px 60px}}
.ok20-portfolio{background:#faf9ff;padding:95px 0 106px;position:relative}
.ok20-section-lead{display:flex;align-items:end;justify-content:space-between;gap:28px;margin:0 0 31px}
.ok20-section-lead h2{font-size:clamp(38px,4.35vw,62px);line-height:1.21;margin:0}
.ok20-section-lead>p{margin:0;line-height:1.9;font-size:16px;color:#77728b;max-width:430px}
.ok20-portfolio-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 27px}
.ok20-portfolio-filters button{background:transparent;border:1px solid #e4dff8;border-radius:999px;padding:7px 17px;font-size:14px;font-weight:750;color:#554d78;transition:background .2s,color .2s}
.ok20-portfolio-filters button.selected,.ok20-portfolio-filters button:hover{color:#fff;background:#6355e9;border-color:#6355e9}
.ok20-portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ok20-work-card{padding:0;border:0;border-radius:25px;overflow:hidden;text-align:right;background:#fff;box-shadow:0 12px 28px rgba(33,24,100,.07);transition:box-shadow .3s,translate .3s;min-width:0}
.ok20-work-card:hover{box-shadow:0 27px 48px rgba(33,24,100,.14);translate:0 -5px}
.ok20-work-image{height:255px;overflow:hidden}
.ok20-work-image .ok261-portfolio-art{height:100%;min-height:100%;width:100%;border-radius:0;transform:none!important}
.ok20-work-image :is(.ok261-art-title){font-size:clamp(25px,2.6vw,40px)}
.ok20-work-meta{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:12px}
.ok20-work-meta b{font-size:17px;color:#29263d}.ok20-work-meta i{font-size:22px;font-weight:500;color:#6455e9;font-style:normal}
.ok20-more-work{display:flex;align-items:center;gap:16px;justify-content:center;width:min(450px,100%);margin:32px auto 0;border:0;border-radius:100px;background:#6254ee;color:#fff;font-weight:800;padding:14px 24px;font-size:16px;min-height:56px;transition:transform .25s}
.ok20-more-work:hover{transform:translateY(-4px)}
.ok20-pricing{background:linear-gradient(180deg,#f7f6ff,#f3f1ff 100%);padding:102px 0 98px}
.ok20-section-lead.centered{display:block;text-align:center;max-width:810px;margin:0 auto 30px}
.ok20-section-lead.centered p{max-width:730px;margin:13px auto 0}
.ok20-lang{display:flex;justify-content:center;gap:7px;margin-bottom:29px}
.ok20-lang button{background:#fff;border:1px solid #e7e2fb;color:#716c80;border-radius:999px;padding:7px 16px;font-size:13px}
.ok20-lang button.selected{background:#6255e7;color:#fff;border-color:#6255e7}
.ok20-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.ok20-plan-card{background:rgba(255,255,255,.94);border:1px solid #e4e0f5;box-shadow:0 20px 40px rgba(43,33,110,.055);border-radius:30px;padding:29px 25px;display:flex;flex-direction:column;min-width:0;transition:box-shadow .25s,translate .25s}
.ok20-plan-card:hover{translate:0 -4px;box-shadow:0 29px 55px rgba(43,33,110,.12)}
.ok20-plan-card.featured{background:#25243e;border-color:#25243e;color:#fff;box-shadow:0 29px 55px rgba(38,27,91,.16)}
.ok20-plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ok20-plan-top h3{font-size:27px;margin:0;color:#23223c}
.ok20-plan-top span{font-size:12px;background:#f4f2ff;color:#6759d8;padding:7px 10px;border-radius:999px;font-weight:700}
.ok20-plan-price{font-size:clamp(26px,2.65vw,37px);font-weight:900;color:#6655e9;margin:26px 0 13px;min-height:54px;line-height:1.5}
.ok20-plan-card>p{color:#6d697e;font-size:14px;line-height:1.9;margin:0 0 20px;min-height:62px}
.ok20-plan-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px}
.ok20-plan-metrics>div{border-radius:16px;background:#f3f2ff;padding:13px 8px;text-align:center}
.ok20-plan-metrics b{display:block;font:900 31px/1.1 Inter,Arial;color:#6655e9;margin-bottom:7px}
.ok20-plan-metrics span{font-size:12px;color:#79738b}
.ok20-plan-card h4{font-size:15px;margin:2px 0 13px}
.ok20-plan-features{display:grid;gap:8px;align-content:start;margin-bottom:29px;flex:1}
.ok20-plan-features span{font-size:13px;color:#6e6a81;line-height:1.7}
.ok20-plan-action{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;background:#6455e9;color:#fff;border-radius:15px;padding:13px 17px;font-size:15px;font-weight:800;margin-top:auto}
.ok20-plan-action>span{font-size:20px;font-weight:400}
.ok20-plan-card.featured :is(.ok20-plan-top h3,.ok20-plan-price,.ok20-plan-features span,.ok20-plan-card>p,.ok20-plan-metrics span){color:#fff}
.ok20-plan-card.featured>p{color:#d4d1ed}
.ok20-plan-card.featured .ok20-plan-metrics>div{background:#353456}
.ok20-plan-card.featured .ok20-plan-metrics b{color:#baacff}
.ok20-plan-card.featured .ok20-plan-metrics span{color:#dfdef4}
.ok20-plan-card.featured .ok20-plan-action{background:#51cfa9;color:#1d2241}
.ok20-pricing-note{margin:25px auto 0;max-width:850px;text-align:center;color:#77758e;line-height:1.9;font-size:14px}
.ok20-faq{background:#faf9ff;padding:100px 0 115px}
.ok20-faq-grid{display:grid;grid-template-columns:.68fr 1.32fr;gap:60px;align-items:start}
.ok20-faq-head h2{font-size:clamp(38px,4.1vw,59px);line-height:1.25;margin:0 0 12px}
.ok20-faq-head p{font-size:16px;color:#79778c;line-height:1.85}
.ok20-faq-questions{display:grid;gap:10px}
.ok20-faq-item{background:#fff;border:1px solid #e9e5f5;border-radius:17px;overflow:hidden}
.ok20-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 19px;font-size:16px;font-weight:800;color:#2d294b}
.ok20-faq-item summary::-webkit-details-marker{display:none}
.ok20-faq-item summary b{font-size:26px;color:#6856ec;line-height:1;transition:rotate .2s}
.ok20-faq-item[open] summary b{rotate:45deg}
.ok20-faq-item p{margin:0;border-top:1px solid #f0eefa;padding:15px 19px 19px;font-size:14px;color:#6b6880;line-height:2}
/* Website and designers inherit home-family lavender surfaces without replacing their product content. */
.ok19-web-page{background:#faf9ff!important;color:var(--ink20)}
.ok19-web-page .ok19-hero{background:linear-gradient(180deg,#faf9ff,#f5f5ff)}
.ok19-web-page :is(.ok19-web-gallery,.ok19-pricing-section){background:#faf9ff}
.ok19-web-page .ok19-immersive{background:#f4f2ff}
.ok19-web-page .ok19-web-pricing{background:#f4f2ff}
.ok19-web-page .ok19-cta{background:#6555e8}
.ok19-web-page .ok19-site-action{background:#6555e8}
body.ok17-public-active .site>.footer{background:#f5f3ff;border-top:0}
@media(max-width:1000px){
 .ok20-design-hero{min-height:0;padding:64px 0}
 .ok20-hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(230px,.65fr)}
 .ok20-hero-copy h1{font-size:clamp(45px,6vw,72px)}
 .ok20-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ok20-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .ok20-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:7px}
 .ok20-hero-copy h1{font-size:clamp(42px,8.7vw,65px);max-width:100%}
 .ok20-hero-graphics{width:min(300px,72%);min-height:220px;align-self:center;aspect-ratio:1;margin-top:12px}
 .ok20-hero-cursor{font-size:55px}
 .ok20-small-glass{width:60px;height:60px}.ok20-small-glass span{font-size:30px}
 .ok20-design-types{padding:67px 0 75px}
 .ok20-type-cloud{gap:11px 8px}
 .ok20-type-pill{font-size:clamp(15px,3.4vw,22px);padding:8px 20px;min-height:45px}
 .ok20-section-lead{display:block}.ok20-section-lead>p{margin-top:15px;max-width:650px}
 .ok20-faq-grid{grid-template-columns:1fr;gap:25px}
 .ok20-portfolio,.ok20-pricing,.ok20-faq{padding-block:75px}
}
@media(max-width:540px){
 .ok20-design-hero{padding:38px 0 46px}
 .ok20-hero-copy h1{font-size:clamp(36px,10.1vw,50px);margin-bottom:22px}
 .ok20-green-highlight{padding:1px 15px 3px}
 .ok20-hero-actions{gap:10px}
 .ok20-button{font-size:13px;min-height:45px;padding:9px 14px;gap:9px}
 .ok20-hero-note{font-size:12px;margin:17px 0 0}
 .ok20-hero-graphics{min-height:180px;width:min(240px,73%)}
 .ok20-section-title{font-size:clamp(30px,8vw,42px);margin-bottom:22px}
 .ok20-type-pill{font-size:15px;padding:7px 16px;min-height:40px}
 .ok20-portfolio-grid,.ok20-plan-grid{grid-template-columns:1fr;gap:14px}
 .ok20-work-image{height:240px}
 .ok20-section-lead h2,.ok20-faq-head h2{font-size:36px}
 .ok20-plan-card{padding:25px 20px}
 .ok20-portfolio-filters{gap:6px}
 .ok20-portfolio-filters button{padding:5px 11px;font-size:12px}
 .ok20-pricing,.ok20-portfolio,.ok20-faq{padding-block:64px}
}
@media(prefers-reduced-motion:reduce){
 .ok20-page *,.ok20-page *::before,.ok20-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .ok20-hero-copy{transform:none!important}.ok20-hero-graphics{transform:none!important}
 .ok20-type-pill{transform:none!important}
}
/* Public designer and informational pages use the same visual palette as the home and subscriptions. */
body.ok17-public-active .ok17-designers-page{background:linear-gradient(180deg,#faf9ff,#f5f3ff);border-radius:0;padding-top:70px;padding-bottom:90px}
body.ok17-public-active .ok17-designers-page .inner-title{font-size:clamp(46px,5vw,76px);line-height:1.22}
body.ok17-public-active .ok17-designers-page .form-card{border:1px solid rgba(101,85,232,.14);box-shadow:0 25px 65px rgba(42,31,116,.08);border-radius:26px}
body.ok17-public-active .ok17-designers-page .tile{border-radius:22px;background:#f3f0ff}
body.ok17-public-active .ok17-simple-page{border-radius:0;background:#faf9ff;padding-top:75px;padding-bottom:100px}