/* Okko-only lower-page experiment. Hero remains unchanged. */
.ok-benefits,.ok-app{padding:60px 0 0}
.ok-benefits h2,.ok-app h2,.ok-closing h2{font-size:clamp(30px,8.5vw,44px);line-height:1.06;letter-spacing:-.045em;margin:0;font-weight:750}
.ok-benefits h2 em,.ok-app h2 em{font-style:normal;color:#baa0ff}
.ok-lead{font-size:15px;line-height:1.6;color:#b9b0c8;margin:25px 0 28px}
.ok-benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ok-tile{min-width:0;min-height:260px;padding:20px 16px;position:relative;overflow:hidden;border-radius:23px;color:#f1eafa}
.ok-movies{background:#30213f}
.ok-sport{background:#25243c}
.ok-tile-label{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px}
.ok-tile-label>span{font-size:23px;line-height:1}
.ok-tile h3{font-size:clamp(25px,7vw,36px);line-height:1.08;letter-spacing:-.035em;margin:29px 0 16px;position:relative;z-index:1}
.ok-tile p{font-size:12px;line-height:1.5;margin:0;position:relative;z-index:1}
.ok-filmstrip{display:flex;gap:9px;position:absolute;left:auto;right:-14px;bottom:-7px;transform:rotate(-13deg);width:220px}
.ok-filmstrip i{width:48px;height:48px;flex-shrink:0;border:3px solid #ac82e2;border-radius:7px;background:#ab8bdd33}
.ok-sport-rings{position:absolute;width:190px;height:190px;border:12px solid #8f8aca22;box-shadow:0 0 0 12px #8f8aca11;border-radius:50%;right:-40px;bottom:-65px}
.ok-zero{grid-column:1/-1;background:#2c1c42;border-radius:23px;padding:25px 18px;min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ok-zero h3{font-size:14px;font-weight:500;margin:0 0 12px;color:#eee5ff}
.ok-zero p{font-size:12px;line-height:1.55;color:#c5b8d9;margin:0}
.ok-zero strong{font-size:84px;line-height:1;letter-spacing:-.06em;color:#c6a8ff;white-space:nowrap}
.ok-zero small{font-size:35px}
.ok-app{overflow:hidden;padding-bottom:15px}
.ok-app .ok-lead{margin-bottom:20px}
.ok-text-link{display:flex;gap:28px;align-items:center;border:0;border-bottom:1px solid #bca1ff66;padding:0 0 9px;background:none;color:#c1a7ff;font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.ok-ribbons{position:relative;height:225px;margin:32px 0 0}
.ok-ribbon-back{position:absolute;top:60px;left:-30px;width:calc(100% + 90px);padding:23px 10px;background:#bba4ec25;color:#c1a7ff99;transform:rotate(-17deg);white-space:nowrap;font-size:23px;font-weight:750;letter-spacing:-.04em;border-radius:17px}
.ok-ribbon-front{position:absolute;top:110px;left:4px;width:calc(100% - 8px);padding:25px 18px;background:#8150ce;color:#fff;transform:rotate(8deg);border-radius:18px;display:flex;justify-content:space-between;gap:8px;font-size:clamp(17px,5.2vw,27px);font-weight:750;letter-spacing:-.04em;box-shadow:0 15px 25px #0002}
.ok-closing{position:relative;overflow:hidden;background:#7946c1;border-radius:28px;padding:34px 25px;margin-top:32px;margin-bottom:36px}
.ok-closing h2{position:relative;color:#fff;max-width:12ch}
.ok-closing p{position:relative;margin:22px 0 27px;max-width:40ch;font-size:15px;line-height:1.6;color:#f2eafa}
.ok-closing .button{position:relative;border-radius:999px;background:#fff;color:#281637;font-size:14px;min-height:56px;padding:15px 21px;gap:24px}
.ok-closing-symbol{position:absolute;right:-14px;top:115px;font-size:180px;line-height:1;color:#ffffff08;transform:rotate(-15deg)}
@media(min-width:761px){.ok-benefits,.ok-app{max-width:800px}.ok-tile{min-height:290px}.ok-closing{max-width:800px}}
@media(prefers-reduced-motion:no-preference){.ok-filmstrip{animation:ok-film-drift 6s ease-in-out infinite}@keyframes ok-film-drift{50%{transform:translateX(12px) rotate(-13deg)}}}
.ok-showcase{background:#21182e;border-radius:28px;margin-top:28px;overflow:hidden;padding:34px 26px 0}
.ok-showcase h2{font-size:clamp(36px,10vw,48px);line-height:1.04;letter-spacing:-.045em;margin:0;color:#fff}
.ok-showcase h2 em{font-style:normal;color:#bfa0ff}
.ok-showcase-intro{font-size:15px;line-height:1.6;color:#bdb3cb;margin:25px 0}
.ok-showcase-list{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:20px}
.ok-showcase-list li{display:flex;gap:20px;align-items:center;font-size:13px;line-height:1.5;color:#f2edf7}
.ok-showcase-list svg{width:23px;height:23px;flex-shrink:0;fill:none;stroke:#bb95ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ok-showcase .button{border-radius:999px;min-height:57px;gap:22px;font-size:14px;background:#c4a7fc;color:#1d122e;padding:15px 22px}
.ok-showcase .button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ok-showcase-scene{position:relative;height:558px;margin-top:50px;display:flex;justify-content:center;align-items:flex-start}
.ok-showcase-halo{position:absolute;top:95px;width:310px;max-width:115%;aspect-ratio:1;border-radius:50%;background:#7353a52a}
.ok-showcase-phone{position:relative;width:250px;max-width:85%;height:490px;padding:7px;background:#100d18;border:1px solid #76628d;border-radius:35px;transform:rotate(-8deg);box-shadow:9px 12px 0 #42364f,0 24px 36px #0005;overflow:hidden}
.ok-showcase-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:28px;background:#000}
.ok-showcase-screen img{position:absolute;width:122%;max-width:none;height:auto;left:-11%;top:-108px}
.ok-showcase-tag{position:absolute;right:-6px;bottom:49px;display:flex;gap:12px;align-items:center;padding:15px 17px;border-radius:16px;background:#efe8fa;color:#2c1c41;transform:rotate(6deg);font-size:11px;line-height:1.6;box-shadow:0 12px 26px #0002}
.ok-showcase-tag svg{width:25px;height:25px;fill:none;stroke:#8152cb;stroke-width:1.5;stroke-linejoin:round}
@media(min-width:761px){.ok-showcase{max-width:800px;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px 32px 0}.ok-showcase-scene{margin-top:65px}}
@media(max-width:360px){.ok-showcase{padding-inline:22px}.ok-showcase-phone{max-width:90%;height:468px}.ok-showcase-screen img{top:-100px}}
@media(prefers-reduced-motion:no-preference){
  .ok-showcase-phone{animation:ok-phone-sway 7s ease-in-out infinite}
  @keyframes ok-phone-sway{
    0%,100%{transform:translateY(0) rotate(-8deg)}
    50%{transform:translateY(-5px) rotate(-6.5deg)}
  }
}

.ok-text-link{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:14px;
  min-height:48px;padding:8px 0;border:0;text-decoration:none;
  line-height:1.4;
}
.ok-text-link span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:22px;line-height:1}
.ok-text-link:focus-visible{outline:2px solid #c1a7ff;outline-offset:5px;border-radius:6px}
#okko-app-preview{scroll-margin-top:20px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Crop the promotional surround, keeping only the black channel screen. */
.ok-showcase-screen img{
  left:0;top:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center top;
  object-view-box:inset(31% 12% 0 12%);
}
.ok-showcase-screen .ok-channel-title{position:absolute;top:23px;left:0;width:100%;text-align:center;color:#fff;font-size:20px;font-weight:700;line-height:1.2;z-index:1}
.ok-showcase-screen img{top:60px;height:calc(100% - 90px);object-fit:contain;object-position:center top}