/* Public interface based on the owner's approved black / gold / white reference. */
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.logo-symbol { width: 54px; height: 54px; flex: 0 0 auto; filter: drop-shadow(0 0 13px #f5c96a44); }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-title { font-size: 27px; font-weight: 700; letter-spacing: -.7px; }
.brand-copy small { font-size: 9px; font-weight: 400; letter-spacing: 1.3px; color: #b9b8b3; }
.brand { gap: 11px; }
.skip-link { position: absolute; top: -80px; left: 24px; z-index: 10; padding: 12px 18px; background: #f9d37c; color: #080705; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body.public-view { background: #060604; }
body.public-view header { position: relative; z-index: 2; max-width: 1530px; height: 87px; width: calc(100% - 9.5vw); margin: 0 auto; padding: 0 3.5vw; border: 1px solid #d9a54b40; border-top: none; border-radius: 0 0 20px 20px; background: linear-gradient(110deg,#080806e8,#080807ba); box-shadow: 0 4px 32px #0008; }
body.public-view header nav { margin-inline-start: auto; align-items: center; gap: clamp(20px,2.7vw,44px); }
body.public-view header nav a { font-size: 14px; color: #bfc0c7; padding: 28px 0; position: relative; white-space: nowrap; transition: color .2s; }
body.public-view header nav a:hover,body.public-view header nav a.active { color: #fff1bd; }
body.public-view header nav a.active::after { content: ''; position: absolute; height: 2px; inset-inline: -7px; bottom: 15px; background: #f7d07d; box-shadow: 0 0 12px #ffc65f; }
body.public-view header nav a.active::before { content: ''; position: absolute; width: 5px; height: 5px; bottom: 14px; left: calc(50% - 2px); border-radius: 50%; background: #fff1b8; box-shadow: 0 0 9px #f9ce78; }
.nav-wave { width: 75px; height: 24px; fill: none; stroke: #c89232; stroke-width: .8; opacity: .65; }
body.public-view .header-actions { gap: 18px; margin-inline-start: clamp(28px,3vw,50px); }
body.public-view button { background: linear-gradient(180deg,#ffe6a3 0%,#f4c366 58%,#d49a39 100%); color: #11100c; border: 1px solid #ffe8ab; border-radius: 13px; font-weight: 650; box-shadow: inset 0 1px 0 #fff9,0 3px 16px #da9f302b; transition: box-shadow .2s,transform .2s; }
body.public-view button:hover { box-shadow: inset 0 1px 0 #fff9,0 0 26px #d8a03e55; transform: translateY(-1px); }
body.public-view button.quiet { background: linear-gradient(150deg,#14130faf,#0a0a08bf); color: #f6f5f1; border-color: #f4d282b5; box-shadow: inset 0 0 15px #0005; }
body.public-view .header-actions button { padding: 12px 24px; font-size: 14px; white-space: nowrap; min-height: 44px; }
#language { display: flex; align-items: center; gap: 5px; }
body.public-view #language { border: 0; background: transparent; box-shadow: none; padding: 10px 0 10px 8px; }
#language .ui-icon { width: 23px; height: 23px; color: #f4ca72; margin-inline-end: 7px; }
#language .language-en,#language .language-ar { opacity: .65; }
#language .current { opacity: 1; }
.language-slash { color: #c49b56; }
#public { position: relative; }
.landing-stage { position: relative; isolation: isolate; margin-top: -87px; padding-top: 87px; }
.landing-stage::before { content: ''; position: absolute; z-index: -2; inset: 0; background: #050505 url('/assets/gold-earth-city.png') center top / cover no-repeat; }
.landing-stage::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#05050330 0%,#05050323 40%,transparent 75%),linear-gradient(0deg,#05050366 0%,transparent 20%); }
#public .hero { max-width: 1672px; margin: 0 auto; background: none; min-height: 645px; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 5.6vw; padding: 58px 8.5vw 38px 9.1vw; }
#public .hero-copy { min-width: 0; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid #d59a3847; border-radius: 999px; background: #0807049c; font-size: 10px; letter-spacing: .45px; color: #f4ca71; margin-bottom: 15px; white-space: nowrap; }
.light-dot { display: inline-block; width: 8px; height: 8px; background: #ffdf8a; border-radius: 50%; box-shadow: 0 0 10px #fbc860,0 0 22px #f6c05488; flex: 0 0 auto; }
#public .hero h1 { font-size: clamp(38px,3.45vw,61px); font-weight: 700; letter-spacing: -1.7px; line-height: 1.1; margin: 0 0 23px; }
#public .hero h1>span { display: block; }
#public .hero h1 .gold { color: #f4ca73; background: linear-gradient(180deg,#ffe3a0,#ebbb58); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-description { color: #c2c3c7; font-size: clamp(16px,1.3vw,22px); line-height: 1.45; max-width: 640px; margin: 25px 0 26px; text-shadow: 0 1px 5px #000; }
.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; }
#public .hero-actions .large { min-height: 55px; padding: 15px 25px; font-size: 16px; white-space: nowrap; }
#hero-start { display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
#hero-start .ui-icon { width: 23px; height: 23px; }
#hero-login { min-width: 116px; }
.watch-link { display: inline-flex; align-items: center; gap: 11px; font-weight: 650; font-size: 14px; white-space: nowrap; }
.play-icon { display: grid; place-items: center; width: 44px; height: 44px; padding-inline-start: 3px; border: 1px solid #ffe0a4; border-radius: 50%; color: #ffe4a4; font-size: 16px; background: #14100577; box-shadow: 0 0 15px #c38d2630; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr 1.1fr; margin-top: 30px; padding: 20px 5px; border-radius: 12px; background: linear-gradient(90deg,#080807b3,#0b0a0770); border: 1px solid #c18e2620; }
.hero-stats>div { padding-inline: 20px; display: flex; flex-direction: column; gap: 2px; }
.hero-stats>div+div { border-inline-start: 1px solid #b7a17280; }
.hero-stats strong { font-size: 28px; color: #ffe5a2; font-weight: 650; line-height: 1.1; }
.hero-stats span { color: #bfc0c6; font-size: 12px; white-space: nowrap; }
#public .engineering-card { position: relative; width: 100%; max-width: 630px; min-height: 500px; margin-top: 22px; border: 1.5px solid #ffdb8e; border-radius: 20px; padding: 0 27px 19px; background: linear-gradient(120deg,#080805f7,#0b0a08f2 60%,#141006ef); box-shadow: inset 0 0 14px #f6c86840,0 0 6px #ffe3a9,0 0 30px #df9e3955,0 20px 40px #0008; animation: none; transform: translateY(12px); }
#public .card-top { border-bottom: 1px solid #c3933933; min-height: 51px; margin-bottom: 1px; gap: 12px; padding: 9px 0; }
.brand-small { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.brand-small .logo-symbol { width: 29px; height: 29px; }
.workflow-label { display: inline-flex; margin-inline-start: auto; font-size: 9px; color: #eadab6; letter-spacing: .2px; border: 1px solid #d1aa5840; border-radius: 999px; padding: 5px 8px; background: #382d1440; white-space: nowrap; }
.panel-menu { font-size: 11px; color: #ad8d4d; white-space: nowrap; }
#public .pipeline { list-style: none; padding: 0; margin: 0; position: relative; width: 68%; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
#public .pipeline::before { content: ''; position: absolute; inset-inline-start: -9px; top: 27px; bottom: 30px; width: 14px; border: 1px solid #e4b453aa; border-inline-end: 0; border-radius: 10px 0 0 10px; box-shadow: -2px 0 8px #e6a83644; }
#public .pipeline li { position: relative; display: flex; align-items: center; gap: 13px; min-height: 63px; padding: 5px 10px 5px 5px; border: 1px solid #92733224; border-radius: 13px; background: linear-gradient(110deg,#211b0e66,#151510b0); }
.stage-icon { display: grid; place-items: center; width: 45px; height: 48px; flex: 0 0 auto; border: 1px solid #d4a345; border-radius: 13px; color: #f6ce79; background: radial-gradient(ellipse,#71501c3b,#080704); box-shadow: inset 0 0 12px #e4ae3523,0 0 14px #a9781920; }
#public .pipeline .stage-icon { color: #f6ce79; }
.stage-icon .ui-icon { width: 30px; height: 30px; filter: drop-shadow(0 0 5px #f5bf5480); }
#public .pipeline li>div { min-width: 0; }
#public .pipeline strong { font-size: 13px; font-weight: 650; line-height: 1.25; display: block; }
#public .pipeline small { font-size: 10px; color: #adb0b6; line-height: 1.4; display: block; margin-top: 5px; }
.stage-node { position: absolute; inset-inline-start: -13px; top: calc(50% - 4px); width: 7px; height: 7px; background: #ffe6a8; box-shadow: 0 0 9px #f9c357; border-radius: 50%; }
.example-preview { position: absolute; inset-inline-end: -38px; top: 103px; width: 240px; padding: 10px 11px 13px; border: 1px solid #d8bc75ad; border-radius: 17px; background: linear-gradient(130deg,#171712f5,#19130cf0); box-shadow: 0 10px 28px #000b,inset 0 1px 8px #e2bb4b20; transform: rotate(2deg); }
.preview-label { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: #eee; font-size: 10px; margin-bottom: 11px; }
.preview-label>span { display: flex; align-items: center; gap: 7px; }
.preview-label>.ui-icon { width: 16px; height: 16px; color: #d1bd8b; }
.mint-dot { display: inline-block; width: 6px; height: 6px; background: #8ce4ba; border-radius: 50%; box-shadow: 0 0 8px #70dca5; }
.mini-browser { overflow: hidden; border: 1px solid #977d45a6; border-radius: 10px; background: #060807; text-align: start; color: #eee; }
.mini-top { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px; font-size: 5px; border-bottom: 1px solid #ffffff0c; }
.mini-top>i { width: 28px; height: 5px; border: 1px solid #ffffff21; border-radius: 3px; }
.mini-content { display: flex; height: 182px; }
.mini-sidebar { flex: 0 0 32px; border-inline-end: 1px solid #ffffff0b; padding: 15px 6px; display: flex; flex-direction: column; gap: 12px; }
.mini-sidebar i { height: 2px; background: #b2ad954d; position: relative; margin-inline-start: 4px; }
.mini-sidebar i::before { content: ''; position: absolute; inset-inline-start: -5px; top: -1px; width: 2px; height: 4px; border: 1px solid #b78e41aa; }
.mini-site { position: relative; padding: 22px 15px 10px; flex: 1; background: linear-gradient(90deg,#090b0bee,#090b0b30),url('/assets/gold-earth-city.png') 68% 70% / auto 220px; }
.mini-site small { font-size: 4px; color: #d2b46b; letter-spacing: .8px; }
.mini-site b { display: block; font-size: 16px; line-height: 1.15; margin-top: 9px; }
.mini-site em { color: #f1cc7b; font-style: normal; }
.mini-site p { margin: 8px 0; color: #d9d8d1; font-size: 5px; line-height: 1.5; }
.mini-cta { font-size: 4px; border-radius: 2px; padding: 3px 7px; color: #141209; background: #e5bd69; }
.mini-widgets { margin-top: 15px; display: flex; gap: 5px; }
.mini-widgets i { height: 25px; flex: 1; border: 1px solid #bfa15f24; border-radius: 3px; background: #060705c0; }
.workflow-footer { margin-top: 12px; border: 1px solid #b98b364d; padding: 9px 11px 8px; border-radius: 10px; background: #3e2a0b22; }
.workflow-footer>div { display: flex; align-items: center; gap: 8px; color: #ffe5a7; font-size: 10px; }
.workflow-footer .light-dot { width: 6px; height: 6px; }
.workflow-track { display: block; height: 2px; margin: 7px 0 6px; background: linear-gradient(90deg,#ffdb86,#ffdb86 66%,#705321 66%); box-shadow: 0 0 8px #cf962a44; }
.workflow-footer p { color: #bfb7a5; margin: 0; font-size: 9px; }
.panel-stats { display: grid; grid-template-columns: repeat(4,1fr); padding-top: 16px; }
.panel-stats>div { display: flex; flex-direction: column; gap: 4px; padding-inline: 6px; text-align: center; }
.panel-stats>div+div { border-inline-start: 1px solid #a68b4233; }
.panel-stats strong { font-size: 14px; font-weight: 650; }
.panel-stats span { color: #b1b4bb; font-size: 8px; }
#public #features { padding: 14px 3.6vw 28px; max-width: 1672px; margin: auto; }
#public .feature-grid { gap: 13px; grid-template-columns: repeat(5,minmax(0,1fr)); }
#public .feature-grid article { min-width: 0; min-height: 151px; padding: 18px 15px; position: relative; display: flex; align-items: flex-start; gap: 15px; border: 1px solid #9f722f70; border-radius: 16px; background: linear-gradient(125deg,#0d0c09e8,#060605e0); box-shadow: inset 0 1px 0 #e4b75709,0 8px 16px #0003; }
#public .feature-grid article>div { min-width: 0; padding-top: 9px; }
#public .feature-icon { width: 54px; height: 57px; flex: 0 0 auto; margin: 0; display: grid; place-items: center; border: 1px solid #c9983f; border-radius: 15px; color: #ecca80; background: radial-gradient(ellipse,#7853203b,#090805 80%); box-shadow: 0 0 14px #e7ae3020,inset 0 0 12px #f1bc4720; }
#public .feature-icon .ui-icon { width: 32px; height: 32px; filter: drop-shadow(0 0 4px #b5812f); }
#public .feature-grid h3 { font-size: 15px; margin: 0 0 5px; font-weight: 650; }
#public .feature-grid p { font-size: 12px; line-height: 1.55; color: #b7bac2; margin: 0; padding-bottom: 14px; }
.feature-arrow { position: absolute; bottom: 16px; inset-inline-end: 14px; width: 21px; height: 21px; border: 1px solid #b18e43; border-radius: 50%; display: grid; place-items: center; color: #f2ca75; }
.feature-arrow .ui-icon { width: 15px; height: 15px; }
#public #how { border-top: 1px solid #c2963b2e; background: radial-gradient(ellipse at 0 0,#4b321312,transparent 65%),#080807; }
#public #pricing { background: #080807; border-top: 1px solid #c2963b1a; }
#public #how h2,#public #pricing h2 { letter-spacing: -1.4px; }
#public .modes article { border-color: #b68c393d; background: linear-gradient(135deg,#15120d,#0a0907); border-radius: 15px; }
#public .modes .featured { border-color: #d7ac5d; background: linear-gradient(135deg,#2a2111,#0b0a07); }
#public footer { background: #080807; border-top: 1px solid #c2963b26; }
[dir=rtl] #public .hero h1 { letter-spacing: 0; line-height: 1.3; font-size: clamp(35px,3.1vw,54px); }
[dir=rtl] #public .hero { padding-inline: 9.1vw 8.5vw; }
[dir=rtl] .hero-description { line-height: 1.7; }
[dir=rtl] #public .pipeline::before { border: 1px solid #e4b453aa; border-inline-end: 0; border-radius: 0 10px 10px 0; box-shadow: 2px 0 8px #e6a83644; }
[dir=rtl] .example-preview { transform: rotate(-2deg); }
[dir=rtl] #hero-start>.ui-icon { transform: rotate(180deg); }
[dir=rtl] .brand-copy small { letter-spacing: 0; }
@media(min-width:1700px) {
 #public .hero { padding-inline: 110px 115px; gap: 90px; min-height: 680px; }
 #public .hero h1 { font-size: 61px; }
 body.public-view header { padding-inline: 40px; }
}
@media(max-width:1400px) {
 body.public-view header { padding-inline: 3vw; }
 .brand-title { font-size: 24px; }
 .brand-copy small { font-size: 8px; }
 .logo-symbol { width: 48px; height: 48px; }
 .nav-wave { display: none; }
 body.public-view header nav { gap: 23px; }
 body.public-view .header-actions { gap: 13px; margin-inline-start: 32px; }
 #public .hero { padding-inline: 7.2vw 6.8vw; gap: 6.7vw; }
 .hero-actions { gap: 15px; }
 #public .hero-actions .large { padding-inline: 20px; font-size: 14px; }
 #hero-login { min-width: 90px; }
 .watch-link { font-size: 12px; gap: 9px; }
 .play-icon { width: 38px; height: 38px; }
 .example-preview { width: 225px; inset-inline-end: -38px; }
 #public .feature-grid article { gap: 10px; padding-inline: 13px; }
 #public .feature-icon { width: 43px; height: 47px; }
 #public .feature-grid h3 { font-size: 12px; }
 #public .feature-grid p { font-size: 10px; }
}
@media(max-width:1150px) {
 body.public-view header { width: calc(100% - 48px); padding-inline: 25px; }
 .brand-copy small { display: none; }
 body.public-view .header-actions { gap: 10px; margin-inline-start: 24px; }
 body.public-view .header-actions button { padding: 11px 17px; }
 body.public-view header nav { gap: 19px; }
 body.public-view header nav a { font-size: 12px; }
 #public .hero { padding-inline: 6vw; gap: 5vw; }
 #public .hero h1 { font-size: 3.45vw; letter-spacing: -1px; }
 .hero-badge { font-size: 8px; padding: 8px 10px; }
 #public .engineering-card { padding-inline: 17px; }
 #public .pipeline { width: 75%; min-width: 230px; }
 .example-preview { width: 180px; inset-inline-end: -22px; top: 121px; }
 .mini-content { height: 158px; }
 .mini-site { padding: 16px 10px 5px; }
 .mini-site b { font-size: 14px; }
 .panel-menu { display: none; }
 .hero-actions { flex-wrap: wrap; }
 .watch-link { margin-top: 2px; }
 #public .feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 #public .feature-grid article { min-height: 140px; }
 #public .feature-grid h3 { font-size: 14px; }
 #public .feature-grid p { font-size: 12px; }
 #public .feature-icon { width: 49px; height: 51px; }
}
@media(max-width:900px) {
 body.public-view header { height: auto; min-height: 83px; padding: 13px 20px; flex-wrap: wrap; row-gap: 8px; }
 body.public-view header nav { order: 3; width: 100%; justify-content: center; display: flex; margin: 0; gap: 32px; }
 body.public-view header nav a { font-size: 13px; padding: 10px 0 13px; }
 body.public-view header nav a.active::after { bottom: 3px; }
 body.public-view header nav a.active::before { bottom: 2px; }
 body.public-view .header-actions { margin-inline-start: auto; }
 .landing-stage { margin-top: -127px; padding-top: 127px; }
 #public .hero { grid-template-columns: minmax(0,1fr); gap: 26px; padding: 48px 9vw 40px; min-height: 0; }
 #public .hero h1 { font-size: clamp(36px,5.2vw,49px); letter-spacing: -1.2px; }
 #public .hero-description { font-size: 18px; max-width: 620px; }
 .hero-badge { font-size: 10px; }
 .hero-actions { flex-wrap: nowrap; gap: 19px; }
 #public .hero-actions .large { padding: 15px 24px; font-size: 15px; }
 .watch-link { font-size: 14px; }
 .hero-stats { max-width: 530px; }
 #public .engineering-card { width: calc(100% - 25px); max-width: 600px; padding-inline: 24px; margin: 18px auto 0; transform: none; }
 #public .pipeline { width: 67%; min-width: 265px; }
 #public .pipeline strong { font-size: 13px; }
 #public .pipeline small { font-size: 10px; }
 .example-preview { width: 242px; inset-inline-end: -25px; top: 94px; }
 .mini-content { height: 182px; }
 .mini-site { padding: 22px 15px 10px; }
 .mini-site b { font-size: 16px; }
 #public #features { padding-inline: 5vw; }
 #public .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 #public .feature-grid article:last-child { grid-column: 1/-1; }
 [dir=rtl] #public .hero { padding-inline: 9vw; }
 [dir=rtl] #public .hero h1 { font-size: clamp(34px,5vw,45px); }
}
@media(max-width:600px) {
 body.public-view header { width: calc(100% - 24px); padding: 10px 12px; border-radius: 0 0 15px 15px; }
 .brand { gap: 7px; }
 .brand-title { font-size: 21px; }
 .logo-symbol { width: 39px; height: 39px; }
 body.public-view .header-actions { gap: 12px; }
 body.public-view .header-actions #login-link { display: none; }
 body.public-view .header-actions #account-link { display: block; padding: 10px 12px; font-size: 11px; border-radius: 9px; min-height: 39px; }
 body.public-view #language { font-size: 11px; gap: 3px; min-height: 40px; padding: 5px 0; }
 #language .ui-icon { display: none; }
 body.public-view header nav { gap: 26px; }
 body.public-view header nav a { font-size: 11px; }
 .landing-stage { margin-top: -113px; padding-top: 113px; }
 .landing-stage::before { background-position: 62% top; background-size: auto 880px; background-color: #080807; }
 .landing-stage::after { background: linear-gradient(0deg,#080807 25%,#08080744 65%,#0004); }
 #public .hero { padding: 36px 24px 29px; gap: 17px; }
 .hero-badge { font-size: 8px; letter-spacing: .1px; padding: 8px 10px; gap: 6px; margin-bottom: 17px; }
 .hero-badge .light-dot { width: 6px; height: 6px; }
 #public .hero h1 { font-size: clamp(29px,7.6vw,42px); letter-spacing: -.7px; margin-bottom: 20px; line-height: 1.16; }
 #public .hero-description { font-size: 15px; line-height: 1.6; margin: 20px 0; }
 .hero-actions { flex-wrap: wrap; gap: 12px; }
 #public .hero-actions .large { padding: 13px 19px; font-size: 13px; min-height: 47px; }
 #hero-start { gap: 8px; }
 #hero-start .ui-icon { width: 20px; height: 20px; }
 #hero-login { min-width: 96px; }
 .watch-link { flex-basis: 100%; font-size: 12px; margin-top: 1px; gap: 9px; }
 .play-icon { width: 31px; height: 31px; font-size: 11px; }
 .hero-stats { padding: 16px 0; margin-top: 20px; }
 .hero-stats>div { padding-inline: 12px; }
 .hero-stats strong { font-size: 23px; }
 .hero-stats span { font-size: 10px; }
 #public .engineering-card { width: 100%; margin-top: 13px; padding: 0 17px 15px; min-height: 0; border-radius: 16px; }
 #public .card-top { gap: 8px; min-height: 49px; margin-bottom: 12px; }
 .brand-small { font-size: 14px; gap: 4px; }
 .brand-small .logo-symbol { width: 24px; height: 24px; }
 .workflow-label { font-size: 8px; padding: 5px 7px; }
 #public .pipeline { width: 100%; min-width: 0; }
 #public .pipeline strong { font-size: 12px; }
 #public .pipeline small { font-size: 10px; }
 #public .pipeline li { min-height: 63px; padding-inline-end: 5px; gap: 10px; }
 .stage-icon { width: 43px; height: 46px; }
 .example-preview { position: relative; inset-inline-end: auto; top: auto; width: 100%; padding: 12px; margin: 15px 0; transform: none; border-radius: 13px; }
 .mini-content { height: 154px; }
 .mini-site { padding: 13px 18px; background-size: auto 260px; }
 .mini-site b { font-size: 20px; }
 .mini-site p { font-size: 6px; }
 .mini-site small { font-size: 5px; }
 .mini-cta { font-size: 5px; }
 .mini-widgets { position: absolute; inset-inline-end: 14px; bottom: 10px; width: 35%; }
 .panel-stats strong { font-size: 12px; }
 .panel-stats span { font-size: 8px; }
 #public #features { padding: 10px 24px 30px; }
 #public .feature-grid { grid-template-columns: 1fr; gap: 12px; }
 #public .feature-grid article { min-height: 120px; padding: 18px; gap: 18px; }
 #public .feature-grid h3 { font-size: 15px; }
 #public .feature-grid p { font-size: 12px; max-width: 310px; }
 #public .feature-grid article>div { padding-top: 3px; }
 #public .feature-icon { width: 50px; height: 53px; }
 #public #how,#public #pricing { padding: 48px 24px; }
 #public #how h2,#public #pricing h2 { font-size: 31px; letter-spacing: -.8px; }
 #public footer { padding: 30px 24px; }
 [dir=rtl] #public .hero { padding-inline: 24px; }
 [dir=rtl] #public .hero h1 { font-size: clamp(27px,7.3vw,39px); }
 [dir=rtl] .example-preview { transform: none; }
}
@media(max-width:360px) {
 .brand-title { font-size: 18px; }
 body.public-view .header-actions { gap: 9px; }
 body.public-view .header-actions #account-link { padding-inline: 8px; font-size: 10px; }
 #public .hero,#public #features { padding-inline: 18px; }
 .hero-badge { font-size: 7px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior: auto; }
 body.public-view button,body.public-view header nav a { transition: none; }
 body.public-view button:hover { transform: none; }
}