/* Sosialio v38 — editorial product story, quiet surfaces, clear details. */
:root{--charcoal:#313131;--quiet-line:#ffffff16}
.nav-wrap.is-scrolled .nav{background:rgba(255,255,255,.79);color:#232323;border-color:#ffffffb3;box-shadow:0 8px 32px #1d1d1d10,inset 0 1px 0 #fff;backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15)}
.nav-wrap.is-scrolled .brand-lockup{filter:invert(1)}
.nav-wrap.is-scrolled .nav .button{background:#2b2b2b;color:#fff}
.nav-wrap.is-scrolled .nav .new{background:#2c2c2c08;border-color:#2c2c2c20;color:#595959}
.nav-wrap.is-scrolled .nav .menu-toggle{border-color:#2c2c2c26;color:#282828}
.nav-wrap.is-scrolled .nav #mobile-menu{background:#ffffffed;border-color:#ffffff;color:#282828;box-shadow:0 16px 40px #1d1d1d12}
.platform-strip{position:absolute;bottom:26px;left:24px;right:24px;display:flex;align-items:center;justify-content:center;gap:30px;color:#f3f3f3}
.platform-strip p{margin:0;font-size:13px;color:#e4e4e4;white-space:nowrap}
.platform-strip ul{list-style:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:28px;margin:0;padding:0}
.platform-strip li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;white-space:nowrap}
.platform-strip img{filter:brightness(0) invert(1);object-fit:contain;opacity:.9}
#fitur{padding-bottom:100px}
.feature-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;position:relative;align-items:start}
.story-step{min-height:540px;min-height:70svh;display:flex;flex-direction:column;justify-content:center;scroll-margin-top:135px;padding:60px 0;border-bottom:1px solid #23232312}
.story-step:last-child{border-bottom:0}
.story-step .feature-number{font-size:11px;letter-spacing:.12em;color:#717171}
.story-step h3{font-size:clamp(30px,3vw,41px);font-weight:600;letter-spacing:-.05em;line-height:1.18;margin:22px 0 20px;color:#242424}
.story-step p{font-size:17px;line-height:1.85;color:#737373;max-width:400px;margin:0}
.story-step ul{list-style:none;padding:0;margin:25px 0 0;font-size:14px;color:#4e4e4e}
.story-step li{display:flex;align-items:center;gap:10px;margin-top:10px}
.story-step li:before{content:"";width:5px;height:5px;background:#929292;border-radius:50%;flex:none}
.story-stage{position:sticky;top:calc(120px + max(0px,(100svh - 740px)/2));align-self:start;margin-top:62px;min-width:0}
.story-window{background:linear-gradient(140deg,#fff,#f0f0f0);border:1px solid #dadada;border-radius:24px;box-shadow:0 28px 70px -38px #30303055,inset 0 1px 0 #fff;overflow:hidden}
.story-chrome{height:58px;border-bottom:1px solid #2d2d2d0f;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8d8d8d;font-size:11px;background:#ffffff65}
.window-dots{display:flex;gap:5px}.window-dots i{width:6px;height:6px;border-radius:50%;background:#c6c6c6}
.story-chrome>img{border-radius:6px;opacity:.7}
.story-panels{display:grid;min-height:350px}
.story-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .38s,transform .38s,visibility .38s;min-width:0;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;pointer-events:none}
.story-panel.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.story-panel-label{display:flex;justify-content:space-between;color:#868686;font-size:10px;letter-spacing:.11em;font-weight:600}
.story-panel-body{display:flex;align-items:center;flex:1;min-width:0}
.story-panel-body>div{width:100%;margin:0}
.story-panel-footer{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:#939393}
.story-status-dot{width:5px;height:5px;border-radius:50%;background:#9e9e9e}
.story-progress{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 0}
.story-progress a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid #dbdbdb;color:#939393;font-size:11px;transition:background .25s,color .25s}
.story-progress a[aria-current]{background:#333333;color:white;border-color:#333333}
.story-mobile-preview{display:none}
.story-stage .workspace-preview{background:white;box-shadow:0 16px 35px #2a2a2a08}
.story-stage .preview-bar{padding:14px}.story-stage .asset-grid{padding:0 14px}.story-stage .asset-item{padding:19px 0}.story-stage .asset-item>span:last-child{display:none}
.story-stage .asset-item strong{font-size:13px}.story-stage .asset-item small{font-size:11px}
.story-stage .workflow-preview{padding:12px 18px;background:white;border:1px solid #e1e1e1;border-radius:16px;box-shadow:0 16px 35px #2a2a2a08}
.story-stage .workflow-row{font-size:15px;padding:16px 8px}.story-stage .workflow-row small{font-size:11px}
.story-stage .calendar-preview{background:white;padding:22px;border:1px solid #e1e1e1;border-radius:16px;box-shadow:0 16px 35px #2a2a2a08}
.story-stage .calendar-caption{font-size:14px}.story-stage .mini-calendar{margin-top:24px}.story-stage .mini-calendar>b{font-size:17px;padding:15px 0}.story-stage .calendar-agenda{margin-top:22px;padding-top:20px}
.story-stage .team-visual{background:white;padding:24px;border:1px solid #e1e1e1;border-radius:16px;box-shadow:0 16px 35px #2a2a2a08}
.story-stage .team-visual .task{font-size:14px;padding:18px 0}.story-stage .team-visual .task b{font-size:10px}.story-stage .team-top>span{font-size:11px}
.threads-section,.threads-offer,.closing,.site-footer{background-color:var(--charcoal);background-image:radial-gradient(circle at 1px 1px,#ffffff0a .8px,transparent 1px),radial-gradient(ellipse at 80% 0,#ffffff08,transparent 65%);background-size:15px 15px,100% 100%}
.threads-section{border-top:1px solid #ffffff15}
.demo-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.demo-nav button{justify-content:center;font-size:14px;padding:20px 10px;white-space:nowrap}
.demo-nav button>span{font-size:10px}
.demo-shell{background:#f8f8f8}
.threads-demo-logo{object-fit:contain}
.analytics-demo{padding-top:10px}.analytics-period{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.06em;color:#767676}.analytics-period span{letter-spacing:0;color:#939393}
.analytics-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.analytics-stats>div{border:1px solid #e1e1e1;padding:14px;border-radius:12px;background:#fff}.analytics-stats small{font-size:11px;color:#7d7d7d;display:block}.analytics-stats strong{display:block;font-size:25px;font-weight:600;color:#313131;line-height:1.3;margin-top:4px;letter-spacing:-.03em}
.analytics-chart{height:104px;display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid #dcdcdc;margin:22px 0 18px;padding:0 8px}
.analytics-chart i{height:var(--bar);flex:1;background:#dcdcdc;border-radius:5px 5px 0 0;min-width:0}.analytics-chart .winning-bar{background:#666666}
.winning-content{background:#fff;border:1px solid #e1e1e1;border-radius:10px;padding:12px 14px;color:#3d3d3d}.winning-content>span{font-size:8px;letter-spacing:.09em;display:block;color:#7c7c7c}.winning-content strong{font-size:13px;line-height:1.6;display:block;margin-top:5px;font-weight:500}
.analytics-generate{display:flex;justify-content:space-between;width:100%;margin-top:14px;align-items:center}
.recommendation-result{margin-top:14px;padding:16px;background:#ededed;border:1px solid #d7d7d7;border-radius:12px;color:#383838}.recommendation-result small{display:block;font-size:9px;letter-spacing:.07em}.recommendation-result strong{font-size:14px;display:block;line-height:1.6;margin:7px 0 12px}.recommendation-result button{background:#fff;color:#383838;width:100%}
.price-features{flex:1}.price-card{display:flex;flex-direction:column}.price-features li{padding:10px 0 0}.price-card .button{margin-top:auto}.threads-offer{border:1px solid #ffffff0b}.threads-offer ul{gap:14px 24px}
.site-footer{padding:76px 0 24px;color:#f1f1f1;border-top:1px solid #ffffff12}
.footer-grid{display:grid;grid-template-columns:1.6fr .8fr 1fr 1fr;gap:48px;padding-bottom:56px}
.footer-logo{display:block;width:156px;height:auto}
.footer-about>p{font-size:14px;line-height:1.85;color:#bbbbbb;margin:22px 0 0;max-width:340px}
.footer-tech-label{font-size:9px;letter-spacing:.12em;color:#949494;margin-top:28px}
.footer-technologies{display:flex;flex-wrap:wrap;gap:22px;margin-top:15px;align-items:center}.footer-technologies>div{display:flex;align-items:center;gap:10px;font-size:14px;color:#e0e0e0}.footer-technologies img{filter:brightness(0) invert(1);opacity:.8;object-fit:contain}.footer-technologies small{display:block;font-size:10px;color:#9e9e9e;margin-top:1px}
.footer-about>p.footer-tech-note{font-size:10px;line-height:1.8;color:#959595;margin-top:17px}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.footer-column h3{font-size:14px;font-weight:600;letter-spacing:0;margin:5px 0 10px;color:#f3f3f3;line-height:1.6}.footer-column a{font-size:13px;color:#bbbbbb;line-height:1.7;transition:color .2s}.footer-column a:hover{color:#fff}.footer-contact a{display:flex;align-items:center;gap:10px}.footer-contact svg,.footer-contact img{flex:none;opacity:.8}.footer-contact img{filter:brightness(0) invert(1);object-fit:contain}.footer-base{border-top:1px solid #ffffff15;padding-top:23px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;color:#a9a9a9}.footer-base a{display:flex;align-items:center;gap:8px;font-size:11px;color:#a9a9a9}
@media(min-width:901px) and (max-height:760px){.platform-strip{bottom:20px}.story-stage{top:115px;margin-top:45px}.story-panel{padding:20px;gap:18px}.story-panels{min-height:320px}.story-stage .asset-item{padding:13px 0}.story-stage .workflow-row{padding:12px 7px}.story-stage .mini-calendar>b{padding:10px 0}.story-step{min-height:520px}.story-stage .team-visual .task{padding:13px 0}}
@media(max-width:1100px){.platform-strip{gap:17px;flex-direction:column}.platform-strip ul{gap:25px}.platform-strip p{font-size:12px}.platform-strip li{font-size:13px}.feature-story{gap:34px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.story-panel{padding:20px}.story-stage .asset-item strong{font-size:11px}.story-stage .asset-item small{font-size:9px}.story-stage .asset-icon{width:28px;height:28px}.story-stage .preview-brand,.story-stage .preview-status{font-size:8px}.story-stage .calendar-agenda{flex-wrap:wrap}.story-stage .workflow-row{font-size:13px}.story-stage .workflow-row small{font-size:9px}.story-step h3{font-size:32px}.story-step p{font-size:16px}.footer-grid{gap:30px;grid-template-columns:1.5fr 1fr 1fr}.footer-contact{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:26px}.footer-contact h3{margin:0 10px 0 0}.footer-about>p{max-width:100%}}
@media(max-width:900px){.feature-story{display:block}.story-stage{display:none}.story-step{min-height:0;padding:34px 0 38px;scroll-margin-top:100px}.story-step:first-child{padding-top:8px}.story-step h3{font-size:29px;margin:17px 0 15px}.story-step h3 br{display:none}.story-step p{max-width:none;font-size:16px}.story-step ul{font-size:13px;margin-top:17px}.story-mobile-preview{display:block;margin-top:28px;padding:20px;border:1px solid #e0e0e0;border-radius:18px;background:linear-gradient(145deg,#fff,#ededed)}.story-mobile-preview>div{margin:0}.story-mobile-preview .workspace-preview{background:#fff}.story-mobile-preview .workflow-preview{padding:4px 0}.story-mobile-preview .team-visual{background:#fff}.story-mobile-preview .calendar-preview{background:#fff;padding:15px;border-radius:12px}.story-mobile-preview .team-top>span{font-size:9px}.story-mobile-preview .task{font-size:12px}.story-mobile-preview .task b{font-size:9px}#fitur{padding-bottom:30px}.demo-nav button{font-size:12px;padding:16px 6px;gap:5px}.demo-nav button>span{font-size:9px}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-about{grid-column:1/-1}.footer-about>p{max-width:440px}.footer-contact{grid-column:auto;flex-direction:column;align-items:flex-start;gap:15px}.footer-contact h3{margin:5px 0 10px}.footer-base{align-items:flex-start;flex-direction:column;gap:12px}}
@media(max-width:600px){.platform-strip{bottom:26px;left:20px;right:20px;gap:15px}.platform-strip ul{display:grid;grid-template-columns:repeat(3,max-content);column-gap:24px;row-gap:13px}.platform-strip li{font-size:12px;gap:7px}.platform-strip img{width:18px;height:18px}.platform-strip p{font-size:11px;letter-spacing:.03em}.meadow-hero .hero-grid{padding-bottom:180px}.demo-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-nav button{font-size:13px;padding:13px 10px;gap:8px;border-bottom:1px solid #1d1d1d10}.analytics-period{font-size:8px}.analytics-stats strong{font-size:24px}.analytics-chart{gap:9px;height:90px}.site-footer{padding-top:45px}.footer-grid{gap:30px 20px;padding-bottom:35px}.footer-column h3{font-size:14px}.footer-column a{font-size:13px}.footer-contact{grid-column:1/-1}.footer-contact a{font-size:14px}.footer-contact h3{margin-bottom:5px}.footer-logo{width:145px}.footer-about>p{font-size:14px}.footer-technologies{gap:24px}.footer-technologies>div{font-size:13px}.footer-tech-note{max-width:330px}.footer-base{font-size:11px}.footer-base a{font-size:11px}.story-mobile-preview{padding:15px}.story-step .feature-number{font-size:10px}.story-step h3{font-size:28px}.story-step li{font-size:13px;line-height:1.75}}
@media(prefers-reduced-motion:reduce){.story-panel{transition:none;transform:none}.story-progress a,.nav{transition:none}}
/* Readable fallback when scripting is unavailable. */
html:not(.story-enhanced) .feature-story{display:block}html:not(.story-enhanced) .story-stage{display:none}html:not(.story-enhanced) .story-step{min-height:0;padding:40px 0}html:not(.story-enhanced) .story-mobile-preview{display:block;max-width:600px;margin-top:30px}
.nav-wrap.is-scrolled .links{color:#3d3d3d}.nav-wrap.is-scrolled .links a:hover{color:#161616}
.story-panels{height:430px;min-height:0;grid-template-rows:minmax(0,1fr)}
.story-panel{height:100%;box-sizing:border-box;min-height:0}
.story-panel-body{min-height:0}
@media(min-width:901px) and (max-height:760px){.story-panels{height:365px}.story-panel{gap:16px}.story-stage .workflow-row{padding:10px 7px}.story-stage .asset-item{padding:13px 0}.story-stage .team-visual{padding:17px}}
.platform-strip{padding:0;border:0}

/* V39 — place the preview at the center of the space below the navigation. */
@media(min-width:901px){
 .story-stage{top:calc(120px + max(0px,(100svh - 120px - 550px)/2))}
}
@media(min-width:901px) and (max-height:760px){
 .story-panels{height:360px}
 .story-stage{top:calc(116px + max(0px,(100svh - 116px - 480px)/2))}
}
/* Premium surfaces use a deeper neutral black, with restrained light. */
.threads-section,.threads-offer,.closing,.site-footer{
 background-color:#1c1d1f;
 background-image:radial-gradient(circle at 1px 1px,#ffffff07 .7px,transparent 1px),radial-gradient(ellipse at 50% 0,#ffffff07,transparent 65%);
 background-size:17px 17px,100% 100%;
}
.site-footer{background-color:#17181a}
.threads-offer,.closing{border:1px solid #ffffff12;box-shadow:inset 0 1px 0 #ffffff06}
.threads-section .center>p,.threads-offer p,.closing p{color:#c1c2c3}
/* Use the same icon shapes, gradients and tier accents as app Settings. */
.price-card{padding:30px;border-radius:20px;border:1px solid #e1e3e6;background:#fff;box-shadow:0 8px 24px #00000005}
.price-card[data-plan="pro"]{background:linear-gradient(145deg,#758cff14,transparent 64%),#fff;border-color:#7d91d859}
.price-card[data-plan="business"]{background:linear-gradient(145deg,#c9a35c1c,transparent 65%),#fff;border-color:#bfa06770}
.price-card h3{display:flex;align-items:center;gap:12px;font-size:28px;line-height:1.3;margin:14px 0 8px;letter-spacing:-.4px}
.planPremiumIcon{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:linear-gradient(135deg,#e5eaff,#bdcaf6);color:#334a93;box-shadow:inset 0 1px 0 #ffffffb3,0 4px 12px #536db51a}
.planPremiumIcon svg{width:23px;height:23px}
[data-plan="free"] .planPremiumIcon{background:linear-gradient(135deg,#f1f2f4,#e3e5e8);color:#30343a;box-shadow:inset 0 1px 0 #ffffffb3,0 4px 12px #00000008}
[data-plan="business"] .planPremiumIcon{background:linear-gradient(135deg,#faf0ce,#d9b572);color:#6f4b18;box-shadow:inset 0 1px 0 #ffffffb3,0 4px 12px #b99a6020}
.price-card .price-label{font-size:10px;letter-spacing:.08em;margin:0;color:#7b8089}
.price-card .price-audience{font-size:15px;line-height:1.7;color:#737983;margin:10px 0 22px;min-height:54px}
.price-card .price-amount{font-size:38px;line-height:1.2;margin:0;letter-spacing:-1px;font-weight:650}
.price-card .price-period{font-size:13px;line-height:1.7;margin:9px 0 22px;min-height:44px;color:#7e8490}
.price-card .price-features{list-style:none;padding:22px 0 0;margin:0 0 26px;border-top:1px solid #252d4012}
.price-card .price-features li{font-size:15px;line-height:1.75;padding:0;margin:0 0 12px;color:#515966}
.price-card .price-features li:before{color:#667181}
.price-card .button{border-radius:12px;min-height:48px;font-size:15px}
.price-card[data-plan="free"] .button{background:#eef0f3;color:#30343a;border:1px solid #dfe3e9;box-shadow:none}
.price-card[data-plan="pro"] .button{background:linear-gradient(110deg,#354b91,#586db0);color:#fff;border:1px solid #ffffff18;box-shadow:0 4px 12px #354b9126}
.price-card[data-plan="business"] .button{background:linear-gradient(110deg,#715225,#906b35);color:#fff;border:1px solid #ffffff18;box-shadow:0 4px 12px #71522526}
.price-card .button:hover{filter:brightness(1.06)}
.threads-plan-title{display:flex;align-items:center;gap:13px}
.threads-plan-icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:#ffffff0c;border:1px solid #ffffff22;box-shadow:inset 0 1px 0 #ffffff12}
.threads-plan-icon img{filter:brightness(0) invert(1);object-fit:contain}
@media(max-width:1100px){.price-card{padding:24px}.price-card h3{font-size:25px}.price-card .price-audience{min-height:78px}.price-card .price-amount{font-size:33px}.price-card .price-features li{font-size:14px}}
@media(max-width:760px){.price-card{padding:26px}.price-card .price-audience,.price-card .price-period{min-height:0}.price-card .price-amount{font-size:38px}.price-card .price-features li{font-size:15px}.price-card h3{font-size:28px}}
@media(min-width:601px) and (max-width:1000px){.pricing-grid{grid-template-columns:1fr}.price-card .price-audience,.price-card .price-period{min-height:0}.price-card .price-features li{font-size:15px}.price-card h3{font-size:28px}.price-card .price-amount{font-size:38px}}