/* Open compositions below the preserved hero/download/free opening. */
.home-free-section { width:min(1180px,100%); margin:84px auto 0; padding:46px 54px 24px; color:var(--slate-700); background:#eef6ff; text-align:left; }
.home-free-heading { max-width:760px; margin-bottom:28px; }
.home-free-heading > span { display:block; margin-bottom:10px; color:var(--navy-700); font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.home-free-heading h2 { letter-spacing:normal; margin:0 0 10px; color:var(--slate-900); font-size:38px; line-height:1.1; font-weight:900; }
.home-free-heading p { margin:0; color:var(--slate-500); font-size:17px; line-height:1.55; }
.home-free-points { margin:0; padding:0; list-style:none; border-top:1px solid rgba(30,64,175,.18); }
.home-free-points li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; align-items:start; padding:18px 0; border-bottom:1px solid rgba(30,64,175,.14); color:var(--slate-600); font-size:16px; line-height:1.55; }
.home-free-points li .inj-ico { width:23px; height:23px; margin-top:1px; color:var(--navy-700); }
.home-free-points strong { color:var(--slate-900); }
.landing-story { width:min(1180px,100%); margin:112px auto 0; text-align:left; }
.landing-heading { max-width:780px; margin-bottom:32px; }
.landing-heading h2 { margin:0 0 18px; font-size:38px; line-height:1.15; font-weight:900; letter-spacing:-.02em; color:var(--slate-900); }
.landing-heading > p:not(.eyebrow) { color:var(--slate-600); font-size:17px; line-height:1.65; margin:0; }
.landing-story figure { margin:0; }
.vault-intro { max-width:900px; padding:24px 0; }
.vault-intro .landing-heading { margin-bottom:18px; }
.vault-intro-detail { max-width:780px; color:var(--slate-600); font-size:17px; line-height:1.65; margin:0; }
.tag-story { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:48px; align-items:center; }
.tag-copy .landing-heading h2 { font-size:34px; }
.tag-summary { font-size:16px; line-height:1.7; color:var(--slate-600); }
.tag-example { padding:24px; background:#10151e; color:#f8fafc; }
.feed-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.feed-controls strong { display:block; font-size:20px; }
.feed-controls > div > span { display:block; color:#b7c6d9; font-size:13px; margin-top:4px; }
.feed-switch { display:flex; padding:4px; gap:4px; background:transparent; flex-shrink:0; }
.feed-switch button { background:transparent; color:#d5dfed; border:0; font-size:13px; min-height:36px; padding:8px 16px; box-shadow:none; }
.feed-switch button[aria-pressed="true"] { color:white; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:7px; }
.feed-scene { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
.video-example { min-width:0; }
.video-art { position:relative; overflow:hidden; aspect-ratio:480/260; border-radius:16px; }
.video-art > svg { width:100%; height:100%; display:block; }
.art-politics { background:linear-gradient(120deg,#802b2b,#351d2a 48%,#1d3563 49%,#49699b); }
.art-gaming { background:linear-gradient(120deg,#38285f,#604eb7); }
.art-lecture { background:linear-gradient(130deg,#2f7261,#13a152 55%,#8ee2b1); }
.art-build { background:linear-gradient(135deg,#177c91,#69c8c0); }
.video-badge { position:absolute; left:12px; top:12px; z-index:2; background:#ae302b; color:white; padding:4px 9px; border-radius:20px; font-size:11px; font-weight:800; line-height:1.5; }
.video-kept { background:#b5f5d0; color:#164c33; }
.video-duration { position:absolute; right:12px; bottom:12px; z-index:2; padding:3px 8px; border-radius:7px; background:rgba(3,10,23,.86); color:white; font-size:15px; font-weight:800; line-height:1.4; }
.video-cover { position:absolute; inset:0; display:grid; place-items:center; background:rgba(12,18,31,.58); color:white; font-weight:800; font-size:18px; text-shadow:0 2px 8px #000; }
.feed-scene[data-filtered="false"] .video-cover { display:none; }
.feed-scene[data-filtered="false"] [data-blocked="true"] .video-badge { background:#35465f; }
.video-caption { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; margin-top:12px; }
.channel-dot { width:30px; height:30px; border-radius:50%; margin-top:2px; }
.channel-red { background:#f54a46; }.channel-purple { background:#ae8ffc; }.channel-green { background:#21bf66; }.channel-blue { background:#33bbed; }
.video-caption h3 { font-size:15px; line-height:1.35; color:white; margin:0 0 8px; }
.video-tag { display:inline-block; padding:2px 0; font-size:11px; font-weight:700; line-height:1.5; }
.tag-politics { color:#ffa79f; }.tag-gaming { color:#cbb7ff; }.tag-learning { color:#a6e9c6; }
.video-caption .video-verdict { font-size:12px; line-height:1.4; color:#b7c6d9; margin:5px 0 0; }
.tag-example figcaption { margin-top:24px; padding-top:0; font-size:12px; line-height:1.6; color:#b7c6d9; text-align:left; }
.tag-example figcaption > span { display:block; }
.tag-example figcaption > span:first-child { color:#e2ecf9; margin-bottom:4px; }
.landing-note { font-size:14px; color:var(--slate-600); margin-top:24px; }
.landing-note a { display:block; margin-top:8px; }
.rule-story { padding:40px 0; background:linear-gradient(180deg,transparent,#eaf3ff 30%,#eef6ff 75%,transparent); }
.rule-scenario { max-width:860px; margin:0 0 28px; color:var(--slate-600); font-size:20px; line-height:1.75; }
.rule-scenario > span { display:block; margin-top:12px; font-size:16px; }
.landing-story .rule-capture { width:50%; margin:32px auto; }
.rule-scenario strong { color:var(--slate-900); }
.app-capture img { display:block; width:100%; height:auto; }
/* Reserve the selected capture's space even while the previous picture
   source remains decoded during a viewport change. */
.rule-capture img { aspect-ratio:2360/2896; }
.app-capture figcaption { margin-top:14px; color:var(--slate-500); font-size:12px; line-height:1.6; }
.activity-story { padding:46px 0; background:linear-gradient(180deg,transparent,#edf5ff 25%,#edf5ff 70%,transparent); }
.activity-recording { max-width:780px; margin:28px 0 0; font-size:16px; line-height:1.7; color:var(--slate-600); }
.product-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin:0 0 36px; }
.product-overview h3 { color:var(--slate-900); margin:0 0 8px; font-size:17px; }
.product-overview p { color:var(--slate-600); font-size:14px; margin:0; }
.get-started-demo { margin:0 0 40px; text-align:left; }
.get-started-demo > h3 { margin:0 0 12px; }
.get-started-demo > p { max-width:900px; }
.demo-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:24px 0 12px; }
.demo-products { display:flex; flex-wrap:wrap; align-items:center; gap:28px; }
.demo-products button[aria-pressed="true"] { color:var(--navy-700); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; }
#resetDemo { color:var(--slate-500); font-size:14px; }
.get-started-demo iframe { display:block; width:100%; height:760px; border:0; background:white; }
.get-started-demo iframe[hidden] { display:none; }
@media(max-width:600px) {
  .rule-capture img { aspect-ratio:750/3776; }
  .landing-story .rule-capture { width:100%; }
  .tag-story { grid-template-columns:1fr; gap:28px; }
  .tag-copy .landing-heading h2 { font-size:30px; }
  .product-overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .demo-toolbar { align-items:flex-start; flex-wrap:wrap; }
  .get-started-demo iframe { height:700px; }
  .home-free-section { margin-top:56px; padding:32px 20px 16px; }
  .home-free-heading { margin-bottom:20px; }
  .home-free-heading h2,.landing-heading h2 { font-size:30px; }
  .home-free-heading p,.home-free-points li,.landing-heading > p:not(.eyebrow) { font-size:15px; }
  .home-free-points li { grid-template-columns:24px minmax(0,1fr); gap:11px; padding:16px 0; }
  .home-free-points li .inj-ico { width:20px; height:20px; }
  .landing-story { margin-top:64px; }
  .landing-heading { margin-bottom:24px; }
  .vault-intro-detail { font-size:15px; }
  .tag-example { padding:16px; }
  .feed-controls { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:18px; }
  .feed-controls strong { font-size:17px; }
  .feed-switch { width:100%; }
  .feed-switch button { flex:1; }
  .feed-scene { grid-template-columns:1fr; gap:24px; }
  .video-caption h3 { font-size:14px; }
  .video-cover { font-size:16px; }
  .video-duration { font-size:13px; }
  .rule-scenario { font-size:18px; }
  .rule-story,.activity-story { padding:28px 0; }
}

@media(min-width:601px) and (max-width:1000px) {
  .tag-story { grid-template-columns:1fr; gap:32px; }
}