/* Product demonstrations: a single application surface, with playback outside it. */
.publish-walkthrough{display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:100px;padding:0 0 80px}
.walkthrough-intro h2{font-size:40px;line-height:1.4;font-weight:600;letter-spacing:-.015em;margin-top:16px}
.walkthrough-intro>p:not(.overline){font-size:var(--copy-size);color:var(--muted);line-height:1.9;max-width:310px;margin-top:20px}
.walkthrough-intro .action-link{margin-top:24px}
.product-demo{min-width:0;width:100%;margin:0}
.demo-meta{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:13px}
.demo-meta>span:first-child{color:var(--accent);font-weight:600}
.demo-display{position:relative;height:420px;overflow:hidden;background:white;border:1px solid #e8d0d7;border-radius:10px;box-shadow:0 12px 35px #342a2d07}
.demo-frame{position:absolute;inset:0;padding:28px 32px;overflow:auto;color:#342a2d;font-size:16px;line-height:1.65}
.demo-app-label{font-size:14px;font-weight:500;color:#716068;margin-bottom:19px}
.demo-screen-title{font-size:26px;font-weight:600;line-height:1.4;margin:0 0 26px}
.demo-mode{display:flex;align-items:center;justify-content:space-between;min-height:63px;border-bottom:1px solid #e8d0d7;font-size:18px;padding:13px 0}
.demo-mode.demo-selected{color:var(--accent);font-weight:600}
.demo-radio{display:block;flex-shrink:0;width:19px;height:19px;border:1px solid #a17081;border-radius:50%}
.demo-selected .demo-radio{border:5px solid var(--accent)}
.demo-bottom-action{display:block;width:100%;margin-top:28px;min-height:47px;padding:10px 15px;text-align:center;font-size:16px;font-weight:600;color:white;background:var(--accent);border-radius:4px}
.demo-photo-upload{display:flex;gap:25px;align-items:center;margin:17px 0 20px}
.demo-photo-upload img{height:130px;width:155px;object-fit:cover;object-position:50% 64%;border-radius:3px}
.demo-photo-upload>div{display:grid;gap:6px;font-size:14px;color:#716068}
.demo-photo-upload strong{font-size:20px;font-weight:500;color:var(--ink)}
.demo-field{padding:9px 0 11px;border-bottom:1px solid #e8d0d7;min-width:0}
.demo-field>span{display:block;font-size:13px;color:#716068;margin-bottom:5px}
.demo-field>strong{display:block;font-size:17px;font-weight:500;line-height:1.7}
.demo-field-inline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:0}
.demo-field-inline>span{margin:0}
.demo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px}
.demo-price{grid-column:1/-1}
.demo-price em{font-size:14px;font-style:normal;margin-left:15px;color:#716068}
.demo-description{grid-column:1/-1}
.demo-description>strong{font-size:16px;font-weight:400}
.demo-form-grid+.demo-bottom-action{display:block;width:100%;margin-top:20px}
.demo-complete{display:flex;flex-direction:column;align-items:center;justify-content:center}
.demo-check{color:var(--accent);font-size:46px;font-weight:500;line-height:1;margin-bottom:20px}
.demo-complete h3{font-size:24px;font-weight:600;line-height:1.5;text-align:center}
.demo-published-item{display:flex;align-items:center;gap:23px;padding-top:27px;margin-top:24px;border-top:1px solid #e8d0d7;width:100%;justify-content:center}
.demo-published-item img{height:92px;width:106px;object-fit:cover;object-position:50% 64%;border-radius:3px}
.demo-published-item strong{font-size:18px;font-weight:500}
.demo-published-item p{font-size:14px;color:#716068;margin:4px 0}
.demo-published-item span{font-size:17px;color:var(--accent)}
.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:15px}
.demo-steps{display:flex;align-items:center;gap:18px;min-width:0}
.demo-steps button{background:none;border:0;border-bottom:2px solid transparent;font-size:14px;min-height:44px;padding:6px 0;color:#716068;white-space:nowrap}
.demo-steps button:hover{color:var(--accent)}
.demo-steps button[aria-current="step"]{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}
.demo-toggle{background:transparent;color:var(--accent);font-size:14px;font-weight:600;min-height:44px;padding:7px 12px;border:1px solid #a17081;border-radius:4px;white-space:nowrap}
.demo-toggle:hover{background:#fff3f5}
.product-demo figcaption{font-size:14px;color:var(--muted);line-height:1.75;margin-top:8px;min-height:25px}
.community-feature{display:grid;grid-template-columns:1.1fr .85fr;align-items:center;gap:100px}
.community-feature .weekly-topic{padding:0}
.community-feature .weekly-topic h3{font-size:46px;line-height:1.45;margin-top:20px}
.community-feature .topic-description{max-width:360px}
.community-stories{display:grid;grid-template-columns:1.1fr .85fr;gap:100px;margin-top:52px}
.community-story+.community-story{margin:0}
.topic-display{height:440px}
.demo-topic-photo{height:170px;position:relative;overflow:hidden;margin:-28px -32px 20px}
.demo-topic-photo img{height:100%;object-fit:cover;object-position:50% 48%}
.demo-topic-photo>span{position:absolute;left:24px;bottom:15px;background:#fffbf8e8;padding:3px 10px;font-size:13px;font-weight:600}
.demo-topic-title{font-size:23px;font-weight:600;line-height:1.5;margin:12px 0 20px}
.demo-sides{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.demo-sides>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:14px}
.demo-sides strong,.demo-sides button{display:block;padding:7px 22px;font-size:16px;font-weight:600;border-radius:4px}
.demo-blue{color:#3b5977}.demo-red{color:#954563}
.demo-blue strong,.demo-blue button{background:#e7eef5}.demo-red strong{background:#f6dfe6}
.demo-inline-note{font-size:13px;color:var(--muted);line-height:1.8;margin-top:18px}
.demo-confirm-frame{padding:0;display:flex;flex-direction:column}
.demo-confirm-photo{height:165px;object-fit:cover;object-position:50% 50%;filter:brightness(.9)}
.demo-confirm-content{padding:28px 32px}
.demo-confirm-content h3{font-size:24px;line-height:1.5;font-weight:600}
.demo-confirm-content>p{font-size:16px;line-height:1.85;margin-top:13px}
.demo-confirm-actions{display:flex;align-items:center;justify-content:flex-end;gap:30px;margin-top:25px;font-size:16px}
.demo-confirm-actions>span{color:#716068}
.demo-confirm-actions>strong,.demo-confirm-actions>button{font-weight:600;padding:9px 18px;border-radius:4px;background:var(--accent);color:white}
.demo-vote-result{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 30px;font-size:14px}
.demo-vote-result>span{color:var(--accent);font-weight:600}
.demo-vote-result>strong{font-size:13px;font-weight:500;color:#3b5977}
.demo-composer{padding:17px 0;border-bottom:2px solid #99445f;margin-top:23px}
.demo-composer>span,.demo-own-comment>span{font-size:13px;color:#716068}
.demo-composer p,.demo-own-comment p{font-size:17px;line-height:1.8;margin-top:12px}
.demo-send{background:var(--accent);color:white;padding:9px 26px;font-size:16px;font-weight:600;border-radius:4px;width:max-content;margin:18px 0 0 auto}
.demo-own-comment{border-left:3px solid #7293b5;padding:5px 0 6px 20px;margin-top:28px}
.demo-vote-note{margin-top:29px}
.product-demo[data-playing="true"] .demo-frame:not([hidden]){animation:demo-appear .45s ease both}
.product-demo[data-playing="true"] .demo-typed{animation:demo-type 1.8s steps(16,end) .7s both}
.product-demo[data-playing="true"] .demo-tap{animation:demo-touch 1.1s ease 2.7s 1}
.product-demo[data-playing="true"] .demo-check{animation:demo-appear .5s ease both}
@keyframes demo-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes demo-touch{0%,100%{box-shadow:0 0 0 0 #99445f00}50%{box-shadow:0 0 0 6px #99445f35}}
@media(max-width:1150px){.publish-walkthrough{gap:55px;grid-template-columns:.7fr 1.3fr}.walkthrough-intro h2{font-size:35px}.community-feature,.community-stories{gap:55px}.community-feature .weekly-topic h3{font-size:39px}.demo-frame{padding:24px}.demo-topic-photo{margin:-24px -24px 20px}.demo-steps{gap:13px}.demo-controls{gap:12px}.demo-confirm-frame{padding:0}.demo-confirm-content{padding:25px}}
@media(max-width:850px){.publish-walkthrough{grid-template-columns:1fr;gap:26px;padding-bottom:50px}.walkthrough-intro{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:30px}.walkthrough-intro .overline{grid-column:1/-1}.walkthrough-intro h2{font-size:32px;margin-top:12px}.walkthrough-intro>p:not(.overline){grid-column:1;max-width:none;margin-top:12px}.walkthrough-intro .action-link{grid-column:2;grid-row:2/4;margin:0}.demo-display{height:410px}.demo-photo-upload img{height:135px;width:165px}.community-feature{grid-template-columns:1.15fr .85fr;gap:32px}.community-feature .weekly-topic h3{font-size:33px}.community-feature .weekly-topic h3 br{display:none}.community-feature .topic-description{font-size:16px}.topic-display{height:450px}.topic-demo .demo-frame{padding:20px}.topic-demo .demo-topic-photo{margin:-20px -20px 18px;height:150px}.demo-topic-title{font-size:21px}.demo-sides{gap:16px}.demo-sides strong,.demo-sides button{padding:7px 16px}.demo-controls{flex-wrap:wrap;gap:7px}.demo-steps{justify-content:space-between;gap:10px;flex:1 1 100%}.demo-toggle{margin-left:auto}.demo-confirm-content{padding:22px}.topic-demo .demo-confirm-frame{padding:0}.demo-confirm-photo{height:170px}.demo-confirm-actions{gap:20px}.demo-confirm-actions>strong,.demo-confirm-actions>button{padding-inline:13px}.community-stories{gap:38px;margin-top:40px}}
@media(max-width:650px){.publish-walkthrough{gap:26px;padding-bottom:42px}.walkthrough-intro{display:block}.walkthrough-intro h2{font-size:31px}.walkthrough-intro>p:not(.overline){margin-top:13px}.walkthrough-intro .action-link{margin-top:15px}.demo-meta{font-size:13px;gap:8px}.demo-display{height:420px}.demo-frame{padding:23px 20px;font-size:16px}.demo-app-label{font-size:14px;margin-bottom:18px}.demo-screen-title{font-size:25px;margin-bottom:26px}.demo-mode{font-size:17px}.demo-photo-upload{gap:20px;margin:22px 0}.demo-photo-upload img{height:145px;width:145px}.demo-field>strong{font-size:17px}.demo-form-grid{gap:1px 20px}.demo-form-grid .demo-description>strong{font-size:16px}.demo-bottom-action{display:block;width:100%;margin-top:28px}.demo-form-grid+.demo-bottom-action{display:block;width:100%;margin-top:19px}.demo-complete h3{font-size:23px}.demo-published-item{gap:19px}.demo-published-item img{width:90px;height:90px}.demo-published-item strong{font-size:17px}.demo-controls{gap:9px;margin-top:12px}.demo-steps{gap:8px}.demo-steps button{font-size:14px;min-height:44px}.demo-toggle{font-size:14px;padding:7px 14px}.product-demo figcaption{font-size:14px;min-height:49px;margin-top:8px}.community-feature{display:flex;flex-direction:column-reverse;align-items:stretch;gap:28px}.community-feature .weekly-topic h3{font-size:33px;margin-top:15px}.community-feature .topic-description{max-width:none;margin-top:15px}.community-feature .weekly-topic .action-link{margin-top:15px}.community-feature .weekly-topic h3 br{display:none}.topic-display{height:440px}.demo-topic-title{font-size:22px}.demo-sides{gap:15px}.demo-sides>div{font-size:14px}.demo-sides strong,.demo-sides button{font-size:16px}.demo-inline-note{font-size:13px}.demo-confirm-content{padding:24px 20px}.demo-confirm-content h3{font-size:24px}.demo-confirm-content>p{font-size:16px}.demo-confirm-actions{font-size:16px;gap:25px}.demo-vote-result{margin:24px 0 26px;flex-wrap:wrap;gap:8px}.demo-vote-result>span{font-size:15px}.demo-vote-result>strong{font-size:13px}.demo-composer p,.demo-own-comment p{font-size:16px}.community-stories{grid-template-columns:1fr;gap:32px;margin-top:24px}.community-story+.community-story{margin:0}}
@media(max-width:370px){.demo-display{height:430px}.demo-frame{padding:21px 16px}.demo-meta{font-size:13px}.demo-photo-upload{gap:16px}.demo-photo-upload img{width:128px;height:135px}.demo-photo-upload>div{font-size:13px}.demo-form-grid{gap:1px 16px}.demo-field>strong{font-size:16px}.demo-complete h3{font-size:21px}.demo-published-item{gap:15px}.demo-published-item img{width:78px;height:85px}.demo-published-item strong{font-size:16px}.demo-steps button{font-size:13px}.demo-steps{gap:6px}.demo-sides strong,.demo-sides button{padding-inline:14px}.topic-demo .demo-frame{padding:20px 16px}.topic-demo .demo-topic-photo{margin:-20px -16px 18px}.topic-display{height:465px}.topic-demo .demo-confirm-frame{padding:0}.demo-topic-title{font-size:21px}.demo-confirm-content{padding:24px 16px}.demo-confirm-actions{gap:20px}.demo-own-comment{padding-left:15px}}
@media(prefers-reduced-motion:reduce){.product-demo *{animation:none!important;transition:none!important}}