/* hero v2: the headline types a request, and the matching result assembles beside it. Four requests, one platform.
   Without JS or with reduced motion: the first scene shows complete and nothing moves. */
h1 .say{display:block}
h1 .ask{color:var(--violet);display:inline}
h1 .ask::before{content:"\201C";color:var(--gold)} h1 .ask::after{content:"\201D";color:var(--gold)}
[dir="rtl"] h1 .ask::before{content:"\201D"} [dir="rtl"] h1 .ask::after{content:"\201C"}
h1 .caret{display:inline-block;width:.06em;height:.85em;background:var(--violet);vertical-align:-.08em;margin-inline-start:.04em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
h1 .rest{display:block}
.hero h1{font-size:clamp(40px,5.4vw,74px);min-height:5em}

.stage{position:relative;height:540px}
.scene{position:absolute;inset:0;visibility:hidden}
.scene.on{visibility:visible}
.scene .shot{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.25,1.15)}
.scene.on .shot{opacity:1;transform:none}
.scene.on .shot:nth-child(2){transition-delay:.25s} .scene.on .shot:nth-child(3){transition-delay:.5s} .scene.on .shot:nth-child(4){transition-delay:.8s}
.scene .page{transform:translateY(18px) rotate(3deg)} .scene.on .page{transform:rotate(-2deg)}
.stage .ctl{position:absolute;bottom:-6px;inset-inline-start:0;display:flex;gap:6px;align-items:center;z-index:3}
.stage .ctl button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.stage .ctl button svg{width:14px;height:14px}
.stage .dots{display:flex;gap:6px}
.stage .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,width .3s}
.stage .dots i.on{background:var(--violet);width:22px;border-radius:6px}

/* scene: content plan */
.reply{inset-inline-start:0;inset-inline-end:12%;top:0;padding:16px 18px;display:grid;gap:4px}
.reply b{font-size:16px;font-weight:800;display:flex;gap:8px;align-items:center}
.reply b svg{width:18px;height:18px}
.reply span{font-size:15px;color:var(--muted)}
.posts{top:120px;inset-inline-start:0;width:74%;padding:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.posts .p{aspect-ratio:4/5;border-radius:12px;position:relative;overflow:hidden;display:grid;align-content:end;padding:8px;color:#fff;font-size:12px;font-weight:700}
.posts .p:nth-child(1){background:linear-gradient(160deg,#B49BFF,#6A3FE0)} .posts .p:nth-child(2){background:linear-gradient(160deg,#FCD9A4,#E8A93A)}
.posts .p:nth-child(3){background:linear-gradient(160deg,#9BD7C0,#1F8F6B)} .posts .p:nth-child(4){background:linear-gradient(160deg,#F8B4C8,#C2457A)}
.posts .p:nth-child(5){background:linear-gradient(160deg,#C9B8FF,#4421B8)} .posts .p:nth-child(6){background:linear-gradient(160deg,#FFE0B5,#D9822B)}
.posts .p em{position:absolute;top:8px;inset-inline-end:8px;font-style:normal;background:rgba(255,255,255,.9);color:var(--ink);border-radius:6px;padding:1px 6px;font-size:11px}
.caption{top:300px;inset-inline-end:0;width:56%;padding:14px 16px;display:grid;gap:6px;font-size:14.5px}
.caption small{font-weight:800;color:var(--violet-ink);font-size:12.5px}
.sched{top:440px;inset-inline-start:6%;padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:700}
.sched i{width:10px;height:10px;border-radius:50%;background:var(--green)}

/* scene: video */
.film{top:0;inset-inline-end:4%;width:220px;height:390px;border:7px solid var(--ink);border-radius:34px;overflow:hidden;background:linear-gradient(170deg,#3A2A6E,#1B1433 60%,#6A3FE0);display:grid;place-items:center;position:absolute}
.film .play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.film .play svg{width:26px;height:26px}
.film .t{position:absolute;bottom:18px;inset-inline:14px;color:#fff;font-weight:800;font-size:15px;line-height:1.25}
.film .bar{position:absolute;bottom:8px;inset-inline:14px;height:3px;border-radius:3px;background:rgba(255,255,255,.3)}
.film .bar::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:38%;background:var(--gold);border-radius:3px}
.strip{top:300px;inset-inline-start:0;width:58%;padding:12px;display:grid;gap:8px}
.strip small{font-size:12.5px;font-weight:800;color:var(--violet-ink)}
.strip .fr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.strip .fr i{aspect-ratio:9/14;border-radius:8px;background:linear-gradient(160deg,#C9B8FF,#6A3FE0)}
.strip .fr i:nth-child(2n){background:linear-gradient(160deg,#FCD9A4,#C9861F)}
.vreply{top:40px;inset-inline-start:0;width:52%;padding:14px 16px;display:grid;gap:4px}
.vreply b{font-size:16px;font-weight:800}
.vreply span{font-size:14.5px;color:var(--muted)}

/* scene: google profile */
.gmap{top:0;inset-inline-start:0;width:84%;padding:0;overflow:hidden}
.gmap .map{height:120px;background:linear-gradient(135deg,#E7F0E1,#F2EFE6);position:relative}
.gmap .map i{position:absolute;background:#fff;border-radius:3px}
.gmap .map i:nth-child(1){inset-inline:-10px;top:46px;height:10px;transform:rotate(-6deg)}
.gmap .map i:nth-child(2){top:-10px;bottom:-10px;inset-inline-start:42%;width:9px;transform:rotate(10deg)}
.gmap .map i:nth-child(3){inset-inline:-10px;top:88px;height:7px;background:#CFE3F5}
.gmap .pin{position:absolute;top:30px;inset-inline-start:46%;width:34px;height:34px}
.gmap .info{padding:14px 16px;display:grid;gap:3px}
.gmap .info b{font-size:18px;font-weight:800}
.gmap .stars{color:#B26B00;font-weight:700;font-size:14.5px}
.gmap .open{color:var(--green);font-weight:700;font-size:14px}
.gmap .acts{display:flex;gap:8px;margin-top:8px}
.gmap .acts span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;color:#1a73e8}
.review{top:290px;inset-inline-end:0;width:70%;padding:14px 16px;display:grid;gap:6px;font-size:14.5px}
.review .stars{color:#B26B00;font-weight:700}
.review .rep{background:var(--soft);border-radius:12px;padding:8px 12px;font-size:14px}
.review .rep small{display:block;font-weight:800;color:var(--violet-ink);font-size:12px}
.fixed{top:470px;inset-inline-start:4%;padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:700}
.fixed i{width:20px;height:20px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.fixed i svg{width:11px;height:11px}

/* one platform */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:52px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:26px;display:grid;gap:10px;align-content:start;position:relative;overflow:hidden;min-height:230px}
.tile.w3{grid-column:span 3} .tile.w2{grid-column:span 2} .tile.w4{grid-column:span 4}
.tile h3{margin:0;font-size:24px;font-weight:900;letter-spacing:-.02em}
.tile p{margin:0;color:var(--muted);font-size:16.5px;max-width:34ch}
.tile .ask2{font-size:14px;font-weight:700;color:var(--violet-ink);background:var(--soft);border-radius:999px;padding:5px 12px;justify-self:start}
.tile.dark{background:var(--deep);border-color:var(--deep);color:#F3EFFA}
.tile.dark p{color:#CFC6EA} .tile.dark .ask2{background:rgba(255,255,255,.1);color:#E6DDFF}
.tile .viz{margin-top:auto;display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.tile .bars{display:flex;gap:6px;align-items:flex-end;height:64px}
.tile .bars i{width:22px;border-radius:6px 6px 2px 2px;background:var(--cta)}
.tile .bars i.old{background:#CFC6E2}
.tile .chipz{display:flex;gap:6px;flex-wrap:wrap}
.tile .chipz span{font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--ground)}
.tile.dark .chipz span{background:rgba(255,255,255,.1)}

@media (max-width:900px){
  .bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tile.w3,.tile.w2,.tile.w4{grid-column:span 2}
  .stage{height:560px}
  .hero h1{min-height:5.1em}
}
@media (max-width:520px){
  .posts{width:100%} .caption{width:80%;top:330px} .sched{top:470px}
  .film{width:180px;height:320px} .strip{width:72%;top:330px} .vreply{width:60%}
  .gmap{width:100%} .review{width:88%}
}
@media (prefers-reduced-motion:reduce){
  .scene .shot{transition:none} h1 .caret{animation:none;display:none}
}

/* a small picture in every platform tile */
.tile .mp{display:flex;gap:6px;margin-top:auto}
.tile .mp i{width:44px;aspect-ratio:4/5;border-radius:9px;background:linear-gradient(160deg,#B49BFF,#6A3FE0)}
.tile .mp i:nth-child(2){background:linear-gradient(160deg,#FCD9A4,#E8A93A)} .tile .mp i:nth-child(3){background:linear-gradient(160deg,#9BD7C0,#1F8F6B)}
.tile .mf{margin-top:auto;display:flex;gap:4px;align-items:center}
.tile .mf i{width:26px;aspect-ratio:9/14;border-radius:6px;background:linear-gradient(160deg,#C9B8FF,#4421B8)}
.tile .mf i:nth-child(2n){background:linear-gradient(160deg,#FCD9A4,#C9861F)}
.tile .mf b{margin-inline-start:6px;width:34px;height:34px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.tile .mf b svg{width:14px;height:14px}
.tile .ms{margin-top:auto;display:flex;gap:10px;align-items:center;font-weight:800}
.tile .ms svg{width:30px;height:30px}
.tile .ms span{color:#B26B00}
.tile .mb{margin-top:auto;display:grid;gap:6px;font-size:13.5px}
.tile .mb span{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding-bottom:5px}
.tile .mb span em{font-style:normal;color:var(--muted)}
.tile .mb span b{font-weight:800}
.tile .mb span.new b{color:var(--green)}
.tile.dark .bubble{position:absolute;top:28px;inset-inline-end:26px;width:min(46%,320px);background:#E8F8E0;color:#103a12;border-radius:18px 18px 18px 6px;padding:12px 14px;display:grid;gap:3px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transform:rotate(2deg)}
[dir="rtl"] .tile.dark .bubble{border-radius:18px 18px 6px 18px;transform:rotate(-2deg)}
.tile.dark .bubble b{font-size:14.5px} .tile.dark .bubble span{font-size:13.5px;color:#2b5a2d}
.tile.dark .bubble .bt{display:flex;gap:6px;margin-top:4px}
.tile.dark .bubble .bt i{font-style:normal;border:1px solid #2e7d32;color:#2e7d32;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700}
@media (max-width:900px){.tile.dark .bubble{position:static;width:auto;transform:none;margin-top:8px}}